How to give responsive layout divs uniform height?

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
kmorrison
Sr. Propeller Head
Posts: 104
Joined: Mon Nov 11, 2013 3:04 pm
Location: Ottawa, Canada
Contact:

How to give responsive layout divs uniform height?

Post by kmorrison »

I'm tinkering with responsive divs on a landing page. What I want to do is have a row of divs that are all the same height, even though they contain different amount of text. I'm envisioning the parent div having whatever height it needs to have to contain the child div with the most text at whatever width the screen happens to be, and all the other divs adjusting their height to fill the space, forming a nice, neat row of uniform, shaded blocks.

What I actually get, though, is a row of shaded blocks of different heights.

(See the attached image if you're not sure what I'm taking about.)

I did a bit of reading, and people say that if you want to specify a height of 100% for a div, its parent needs a defined height. But the height that the parent needs to be depends on the width of the screen.

Surely a solution exists. Anyone know what it is?
You do not have the required permissions to view the files attached to this post.
Gene K
Propeller Head
Posts: 28
Joined: Mon Apr 13, 2020 1:56 pm

Re: How to give responsive layout divs uniform height?

Post by Gene K »

Hello,

While I don't know if Flare has a GUI tool for this feature, CSS's "flexbox" function is probably the solution to your problem.

W3C guide to flexboxes: https://www.w3schools.com/css/css3_flexbox.asp

Example 3rd-party guide that might help with understanding: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

If you can find how to do this through a Flare setting, great. If not, you can always add the relevant code through the text editor.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: How to give responsive layout divs uniform height?

Post by NorthEast »

How do you get a uniform height on row items using flex?

I'm not a flex expert, but I don't know how to get a uniform height using flex.
But using CSS Grid definitely would handle this - https://css-tricks.com/snippets/css/com ... uide-grid/
Gene K
Propeller Head
Posts: 28
Joined: Mon Apr 13, 2020 1:56 pm

Re: How to give responsive layout divs uniform height?

Post by Gene K »

Dave Lee wrote:How do you get a uniform height on row items using flex?

I'm not a flex expert, but I don't know how to get a uniform height using flex.
But using CSS Grid definitely would handle this - https://css-tricks.com/snippets/css/com ... uide-grid/
I'm not a flex expert either (so I can't really get into the technical details), but it just works in my experience. Here's some sample code that should hopefully confirm that it works for you too.
  • I tested this in the latest version of Google Chrome.
  • I get 3 same-height divs in a row, determined by the div with the most content.
  • This stays consistent as I narrow the window from full-screen, though I do eventually hit a minimum width I don't know how to adjust.
  • Attached screens should hopefully illustrate the behavior on my end.
  • I don't know much of anything about CSS grid or how it compares, so it might be a better solution for the OP's needs.
Sample HTML:

Code: Select all

     <div class="flex-container">
          <div class="OP-example">
               <p>This is the first div. It has only 1 paragraph.</p>
          </div>
          <div class="OP-example">
               <p>This is the second div.</p>
               <p>It has 2 paragraphs.</p>
          </div>
          <div class="OP-example">
               <p>This is the third div.</p>
               <p>It has 3 paragraphs.</p>
               <p>The height should be uniform.</p>
          </div>
     </div>
Sample CSS

Code: Select all

.flex-container { /* Enables flexbox functionality, and defines arrangement and wrapping. */
     display: flex;
     flex-flow: row nowrap;
}

.OP-example { /* Styles example divs to show uniform height. */
     background-color: rgb(255, 255, 255);
     border: 1px solid rgb(217, 217, 217);
     box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
     margin: 1px;
     padding: 0.5em;
     width: 30%;
}
You do not have the required permissions to view the files attached to this post.
kmorrison
Sr. Propeller Head
Posts: 104
Joined: Mon Nov 11, 2013 3:04 pm
Location: Ottawa, Canada
Contact:

Re: How to give responsive layout divs uniform height?

Post by kmorrison »

Thanks! Flex boxes were just the thing. Everything is behaving now.

A note for people who might be wrestling with a similar problem in the future: I found that specifying the flex display option prevented my divs from changing layout when the mobile break-point was hit, so I ended up with all three divs still lining up in a very squished row instead of them rearranging and piling one above the other. Setting the display property back to "block" in the mobile medium fixed that problem. (I don't particularly care if all the divs are the same height when they're not lined up side by side.)
Gene K
Propeller Head
Posts: 28
Joined: Mon Apr 13, 2020 1:56 pm

Re: How to give responsive layout divs uniform height?

Post by Gene K »

kmorrison wrote:Thanks! Flex boxes were just the thing. Everything is behaving now.

A note for people who might be wrestling with a similar problem in the future: I found that specifying the flex display option prevented my divs from changing layout when the mobile break-point was hit, so I ended up with all three divs still lining up in a very squished row instead of them rearranging and piling one above the other. Setting the display property back to "block" in the mobile medium fixed that problem. (I don't particularly care if all the divs are the same height when they're not lined up side by side.)
Glad to know it worked for you! You can also try fiddling with the flex-flow property. Changing it to row wrap should let the divs shift onto new lines when the window narrows past a breakpoint (I specified nowrap to keep the example consistent when I resized it in the screenshots).

With wrap enabled (using the same example I gave previously) I couldn't narrow the browser enough to get a single column. It stopped with 2 divs on the first row and 1 in the second. However, your browser might behave differently and you could try using different width settings for the divs.

The end result should be equivalent to setting display: block in your mobile medium, but it might save you from needing to maintain the differences between different mediums. It also might be worth examining CSS grid as recommended by Dave to see if it will let you set up multiple layouts, I just don't know enough about it to comment further.
Post Reply