0

I have a couple of widgets in line depending on screen size. Here is my layout:

<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
  <div class="widget">
    <div class="name">
      Block name
    </div>
    <div class="description">
      Some description goes here
    </div>
  </div>
</div>

<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
  <div class="widget">
    <div class="name">
      Block name
    </div>
    <div class="description">
      Some very long description goes here
    </div>
  </div>
</div>

<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
  <div class="widget">
    <div class="name">
      Block name
    </div>
    <div class="description">
      Some description goes here
    </div>
  </div>
</div>

and styles are the following:

.widget {
  width: 100%;
  margin: 10px;
  padding: 10px;
  background-color: white;
  //height: auto;
  height: 80px;
  border: 1px silver solid;
  font-size: 18px;
}

.name {
  font-weight: bold;
  height: 40px;
  color: #082654;
}

.description {
  color: #4AB6E1;
}

Here is the jsfiddle

enter image description here The problem is that I want to be them of certain height: e.g.80px, cause its the size that will look nice for almost all cases, but rarely I have some longer content inside widget description and then it goes out of the box. So in this case I'd like its height to adapt to content size and all other widgets to its height too. When I set widgets height to auto - only single widget stretches in height and they look uneven. Any ideas how to change the styles so that to achieve what I need?

Andrew Bone
  • 7,092
  • 2
  • 18
  • 33
Olena Horal
  • 1,166
  • 3
  • 11
  • 26

5 Answers5

1

I you can use jQuery look at this JSFiddle

https://jsfiddle.net/cnoof9hb/

Uses the following to set the height:-

var maxheight = 0;

$('div div.widget').each(function () {
    maxheight = ($(this).height() > maxheight ? $(this).height() : maxheight); 
});

$('div div.widget').height(maxheight);
Tony Hensler
  • 1,482
  • 5
  • 15
  • 30
1

This seems like a perfect time for flexbox, I've made a container div to surround all 3 elements and given it display: flex; I've also given display: flex; to each div bellow that (as these are the bits that need to change size).

Have a look

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.container {
  display: flex;
  flex-wrap: wrap;
}
.container > div {
  display: flex;
  width: 33.33%;
}
.widget {
  width: 100%;
  margin: 10px;
  padding: 10px;
  background-color: white;
  border: 1px silver solid;
  font-size: 18px;
}
.widget .name {
  font-weight: bold;
  height: 40px;
  color: #082654;
}
.widget .description {
  color: #4AB6E1;
}
<div class="container">
  <div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div class="widget">
      <div class="name">
        Block name
      </div>
      <div class="description">
        Some description goes here
      </div>
    </div>
  </div>

  <div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div class="widget">
      <div class="name">
        Block name
      </div>
      <div class="description">
        Some very long description goes here
      </div>
    </div>
  </div>

  <div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div class="widget">
      <div class="name">
        Block name
      </div>
      <div class="description">
        Some description goes here
      </div>
    </div>
  </div>
</div>

I hope this helps.

Andrew Bone
  • 7,092
  • 2
  • 18
  • 33
0

you can try using diplay:table

.widget {
  width: 100%;
  margin: 10px;
  padding: 10px;
  background-color: white;
  //height: auto;
  height: 80px;
  display:table;
  border: 1px silver solid;
  font-size: 18px;
}

.name {
  font-weight: bold;
  height: 40px;
  color: #082654;
}

.description {
  color: #4AB6E1;
}
<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
  <div class="widget">
    <div class="name">
      Block name
    </div>
    <div class="description">
      Some description goes here
    </div>
  </div>
</div>

<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
  <div class="widget">
    <div class="name">
      Block name
    </div>
    <div class="description">
      Some very long description goes here
    </div>
  </div>
</div>

<div class="col-xl-4 col-lg-3 col-md-4 col-sm-6 col-xs-12">
  <div class="widget">
    <div class="name">
      Block name
    </div>
    <div class="description">
      Some description goes here
    </div>
  </div>
</div>
Ganesh Putta
  • 2,622
  • 2
  • 19
  • 26
0

Use float:left to float an element to make the parent element take the cumulative height of it's childrens' height. Also height:auto; to be used in the parent element, as the height is unpredictable.

.widget {
      width: 100%;
      margin: 10px;
      padding: 10px;
      background-color: white;
      /*height: auto;*/ /* removed this */
      border: 1px silver solid;
      font-size: 18px;
  
      /* Added these 2 lines */
      float:left;
      height: auto;
    }

    .name {
      font-weight: bold;
      height: 40px;
      color: #082654;
    }

    .description {
      color: #4AB6E1;
    }
Roy
  • 1,939
  • 1
  • 14
  • 21
  • this would help, but I still want the widget to be of the height 80px when the description fits in one line. Do you have any ideas? – Olena Horal Oct 07 '16 at 11:31
0

Try below code it does "Adapt height of the elements based on siblings height" but you may need to change it little bit to suit ur needs

<div class="t-row">

    <div class="col">Some description goes here Some description goes here</div>

    <div class="col">on goes here</div>

    <div class="col">here</div>

    <div class="col">Some description goes here Some description goes here Some description goes here Some description goes hereSome description goes here Some description goes here</div>

</div>

and css

.t-row{
    display: table-row;
}
.col{
    display: table-cell;
    width: 25%;
    border: 1px solid silver;
    padding: 15px;
    background-color: white;
}

see fiddle here

Rahul
  • 4,294
  • 1
  • 10
  • 12