Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Hover Class and Support for Bootstrap Grid Columns #765

Closed
KarimQaderi opened this issue Jan 3, 2025 · 6 comments
Closed

Add Hover Class and Support for Bootstrap Grid Columns #765

KarimQaderi opened this issue Jan 3, 2025 · 6 comments
Labels
in triage

Comments

@KarimQaderi
Copy link

Add Hover Class for Styling

I need a way to apply specific CSS when hovering over a particular element. It would be great if a class (e.g., hover) could be dynamically added to the main container during hover events, similar to how popup actions work. This would allow for easier styling on hover.

image

Support for Bootstrap Grid System (Row & Column)

I'm trying to build a Bootstrap grid system. While I was able to add a row class successfully, I couldn't find a way to add col classes for the columns. It would be helpful if there were an option to define column classes and structure.

#759

image
@FedericoBonel
Copy link
Collaborator

Hey @KarimQaderi,

Regarding the Add Hover Class for Styling:

  • Which main container are you referring to exactly? If it’s the default wrapper that Puck adds around draggable components, this is now overridable using the inline parameter. This should allow you to add any classes or styles you need directly to draggable components, including hover selectors.

Regarding Support for the Bootstrap Grid System:

  • Have you tried the latest version of Puck? Could you confirm if Bootstrap is working with the new drag-and-drop engine?

@KarimQaderi
Copy link
Author

I have implemented a DropZone for rows and a DropZone for columns. However, after adding columns to a row, the DropZones become non-selectable.

Expected behavior:

DropZones should remain interactive and selectable after adding columns.
Actual behavior:

DropZones inside the row stop being selectable.
Any suggestions or fixes would be appreciated.

@FedericoBonel
Copy link
Collaborator

FedericoBonel commented Feb 13, 2025 •
edited
Loading

I see. I tried reproducing your issue, and I think you’re using display: flex for your row components, right? If so, you can prevent your column DropZones from collapsing by using the inline parameter:

Row: {
  render: () => {
    return (
      <DropZone zone="row" style={{ display: "flex", flexWrap: "wrap" }} />
    );
  },
},
Column: {
  // Remove the default div wrapper around Column components to style them as direct children of the flex Row
  inline: true,
  render: ({ puck }) => {
    return (
      <DropZone
        zone="column"
        style={{ flex: 1 }}
        disallow={["Column"]} // Optionally disallow nesting columns inside columns for a better drag experience
        ref={puck.dragRef}
      />
    );
  },
},

If you’re working with grids, I’d recommend checking out the Multi-column layouts section of the docs. Since Puck 0.18, DropZones and their children can be styled directly with CSS Grid, and it provides better support for drag-and-drop functionality across columns and rows.

@KarimQaderi
Copy link
Author

KarimQaderi commented Feb 13, 2025 •
edited
Loading

tnx

If there was a button here for moving, it would be easier to rearrange the columns.

Image

How can I apply RTL to my entire project?

@FedericoBonel
Copy link
Collaborator

You can use the <html dir="rtl" /> approach

@FedericoBonel
Copy link
Collaborator

FedericoBonel commented Feb 13, 2025 •
edited
Loading

If the problem is now solved let me know so I can close this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
in triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@KarimQaderi @FedericoBonel