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) enter image description here

https://codepen.io/anon/pen/JNKexr

<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)?

Community
  • 1
  • 1
curious
  • 791
  • 2
  • 12
  • 27
  • 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 :) – Asons Apr 23 '17 at 11:32
  • Yeah sorry about that. I will know for the future. Thank you for the effort :) – curious Apr 23 '17 at 11:36
  • Is your question to set equal height or the height of the highest one? – RacoonOnMoon Apr 23 '17 at 13:06
  • @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. – curious Apr 23 '17 at 13:50

2 Answers2

3

try to add the css code:

p.notification {
    height: 100%;
}
Serge Andreev
  • 300
  • 1
  • 5
  • 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 :) – curious Apr 24 '17 at 08:51
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;
}
Jacopo Pace
  • 460
  • 7
  • 14