CMS Development

Pingo
Contributor | Partner
Contributor | Partner

Equal height on a row (drag and drop)

SOLVE

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

 

Skärmavbild 2021-05-14 kl. 13.24.41.pngSkärmavbild 2021-05-14 kl. 13.23.34.pngSkärmavbild 2021-05-14 kl. 13.26.22.png

0 Upvotes
1 Accepted solution
Pingo
Solution
Contributor | Partner
Contributor | Partner

Equal height on a row (drag and drop)

SOLVE

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 😁

 

Skärmavbild 2021-05-15 kl. 00.30.26.png

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}]

 

Skärmavbild 2021-05-15 kl. 00.37.23.png

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

 

Cheers,

Pingo

View solution in original post

3 Replies 3
Pingo
Solution
Contributor | Partner
Contributor | Partner

Equal height on a row (drag and drop)

SOLVE

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 😁

 

Skärmavbild 2021-05-15 kl. 00.30.26.png

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}]

 

Skärmavbild 2021-05-15 kl. 00.37.23.png

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

 

Cheers,

Pingo

stefen
Key Advisor | Partner
Key Advisor | Partner

Equal height on a row (drag and drop)

SOLVE

@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.

Stefen Phelps, Community Champion, Kelp Web Developer
dennisedson
HubSpot Product Team
HubSpot Product Team

Equal height on a row (drag and drop)

SOLVE

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

0 Upvotes