How to set column height equal in few rows Bulma (flexbox)?

O

2

4

I'm using Bulma 0.4.0, though the answer may not be associated with Bulma itself.

How can I set column height equal to others? (see codepen below)

Notice they are all in another column container, and there are few rows of those columns.

Expected behaviour: (woah i made optical illusion)

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
</head>
<body>

<div class="columns">
 <div class="column">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu consectetur lorem, nec facilisis dolor. Morbi rhoncus, mi sit amet ornare tincidunt, augue sem aliquet mauris, non pretium orci nisl at est. Curabitur placerat pharetra augue. Etiam non eros nulla. Praesent aliquet sem dui, id varius enim convallis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis mauris felis, sit amet consectetur augue sollicitudin id.
  </div>
<div class="column">

  <div class="columns">
  <div class="column">
    <p class="notification is-info">Lorem ipsum</p>
  </div>
  <div class="column">
    <p class="notification is-success">Nulla a mauris vel </p>
  </div>
  </div>


  <div class="columns">
  <div class="column">
    <p class="notification is-info">Lorem ipsum</p>
  </div>
  <div class="column">
    <p class="notification is-success">Nulla a mauris vel </p>
  </div>
  <div class="column">
    <p class="notification is-warning">Pellentesque
</p>
  </div>
  <div class="column">
    <p class="notification is-danger">Morbi turpis nunc</p>
  </div>
</div>

<div class="columns">
  <div class="column">
    <p class="notification is-info">Lorem ipsum dolor sit amet</p>
  </div>
  <div class="column">
    <p class="notification is-success">Nulla</p>
  </div>
  <div class="column">
    <p class="notification is-warning">Pellentesque eros tortor,
</p>
  </div>
  <div class="column">
    <p class="notification is-danger">Morbi</p>
  </div>
</div>

<div class="columns">
  <div class="column">
    <p class="notification is-info">Lorem ipsum dolor sit amet</p>
  </div>
  <div class="column">
    <p class="notification is-success">Nulla</p>
  </div>
  <div class="column is-6">
    <p class="notification is-warning">Pellentesque eros tortor,
</p>


</div>
</div>

</body>
</html>

Question is related to my previous one: How to set column height equal to longest column in Bulma (flexbox)?

edit: corrected title
edit2: it has something to do with align-content: stretch; class, though I'm have no idea how to use it. More info: http://cssreference.io/flexbox/#align-content

Opacity answered 23/4, 2017 at 10:56 Comment(4)

So now you changed the first codepen with a second. It is important when you ask questions that you put a proper sample, and if you need to change it so much so the given answer will break and stop working, you'll need to keep it as is and post a new question. I've now deleted my answer since it broke after your edit, so you don't need to write up a new, and I also won't add a new answer now since I need to run, but I'm sure someone else will :) – Burkes 23/4, 2017 at 11:32

Yeah sorry about that. I will know for the future. Thank you for the effort :) – Opacity 23/4, 2017 at 11:36

Is your question to set equal height or the height of the highest one? – Occident 23/4, 2017 at 13:6

@Traver I thought that setting height of highest one is more responsive friendly, but now I think I was wrong. So, equal height. Going to correct first post. – Opacity 23/4, 2017 at 13:50

C

4

try to add the css code:

p.notification {
    height: 100%;
}

Cylix answered 24/4, 2017 at 7:24 Comment(1)

I know it's breaking the rule, but that doesn't stop me from saying THANK YOU SO MUCH! :) So simple... have great day Sergey :) – Opacity 24/4, 2017 at 8:51

S

1

I used the following CSS rule, this way I can use the class .is-equal-height to have aligned columns.

.columns.is-equal-height > .column > * {
    height: 100% !important;
}

Spurry answered 5/1, 2023 at 12:27 Comment(0)

Recommended topics

Hot tags