Equal height on a row (drag and drop)

[Pingo]

Hi,

I'm trying to create a module (very simple in this example) where the height of the modules should be equal when they are presented in the same row.

I'm using a theme with drag and drop so at the moment I can only change my own HTML/CSS (for the module I'm creating).

What I'm trying to achieve is to basically get the columns to be 100% so that I can fill out the column with my own module.

Maybe this is impossible without changing the theme settings (CSS) for the row/columns in the drag and drop?

Thanks

/Stefan

[Pingo · Accepted solution]

Thanks for the help, but I got stuck with the height:100%. I tried it and couldn't get to work.

So I created a module that is using flex grid instead and made the module responsive.

So, now the user can add as many cards that they want and the module then distributes these on one more many rows and columns depending on parameters they can set themselves. Pretty flexible. And they all align 😁

Sharing the code below.

The module

<div class="brv-card-container" style="grid-gap: {{ module.grid_gap}}px; grid-template-columns: repeat(auto-fit, minmax({{ module.min_column_width}}px, 1fr)); grid-auto-rows: minmax({{ module.min_row_height}}px, 1fr);">  
  {% for card in module.cards %}  
    <div style="background: {{module.background_color.color }}; padding: {{ module.card_padding }}px" class="brv-card {{ module.card_shadow }} ">       
      <div>{{ card.card_text }}</div>
    </div> 
  {% endfor %}    
</div> 

The CSS

.brv-card-container {  
  display: grid;  
}

.card-shadow {
  box-shadow: 0px 3px 15px rgb(17 30 55 / 12%);
}

The JSON for the fields

[{"type":"group","id":"fa0d973a-0048-cbc9-fd55-c98a1d7d86b0","label":"Cards","children":[{"type":"richtext","id":"7227938f-8c69-272e-1f4a-779f5e9363e7","label":"Card text","name":"card_text","default":"<p>Text</p>"}],"name":"cards","default":[{"card_text":"<p>Text</p>"}],"occurrence":{"min":1,"max":10,"default":1,"sorting_label_field":"c67e2970-0245-92b9-03c6-33ef83c31f1a"}},{"default":500,"display":"text","id":"47792026-ebee-2112-eacf-45578358c602","label":"Min Column width","locked":false,"name":"min_column_width","required":false,"step":1,"suffix":"px","type":"number"},{"default":350,"display":"text","id":"c24ae3d3-4a3d-bffa-d8a8-fcf7199a132a","label":"Min Row height","locked":false,"name":"min_row_height","required":false,"step":1,"suffix":"px","type":"number"},{"default":30,"display":"text","id":"5932ba7e-48fe-83a3-d907-5ed2d9e76f3d","label":"Grid Gap","locked":false,"name":"grid_gap","required":false,"step":1,"suffix":"px","type":"number"},{"type":"color","id":"20ac6b58-80c1-7a4a-450b-548c3fe480ed","default":{"color":"#f7f7f7","opacity":100},"label":"Background Color","name":"background_color"},{"type":"choice","id":"80c59eb9-2fa3-bcfa-398b-12cbc48f0007","display":"select","choices":[["card-shadow","Use shadow"],[" ","No shadow"]],"label":"Card Shadow","name":"card_shadow"},{"type":"number","id":"304064b6-5f35-91ad-05c7-dc586f444a71","display":"text","step":1,"label":"Card padding","name":"card_padding","suffix":"px","min":0,"max":100,"default":40}]

I hope this helps someone else. It works for me anyway 😉

Cheers,

Pingo

[stefen]

@dennisedson @Pingo your module should be a flex child if it's being used in a Drag and Drop area... so if you added height:100%; to your class styles it should fill it's container.

[dennisedson]

@stefen , how do you try to solve for something like this 🤔