CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
jsPlayer
jsPlayer

Reputation: 1245

Making not parent child div's equal height using jquery?

I am trying to fix a client bug where i am not allowed to change the html or css structure. As you can see there are 3 div blocks side by side is created using bootstrap and is responsive. The problem arises when one of the titles of one of the div is long or content is long, in this case the first one. The height which is auto I guess via bootstrap makes all 3 div not even since one of them require more space to add content. They usually don't have long title as long ad my example but even slightly longer title will make the div uneven like on a iPad size screen. How can I target these div's in jquery and maybe have an if else to check if one of the div is longer other 2 will adjust it's height automatically 

.homefont {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.home-sub-head h1 {
    color: #006ac3;
}

.home-sub-content p {
    color: #7c7f7e;
    margin-top: 15px;
    font-size: 16px;
    margin-bottom: 30px;
}

.doc-content h3 {
    color: #0a5185;
    margin-top: 0px;
    padding-top: 20px;
}

.doc-content {
    background: #f1f1f1;
    padding: 0px 15px 30px 15px;
}

    .doc-content ul li:before {
        font-family: FontAwesome;
        content: "\f105";
        float: left;
        width: 1.4em;
        margin-left: -35px;
        background: #0a5185;
        margin-right: 14px;
        text-align: center;
        color: white;
        font-weight: bold;
        margin-top: 5px;
    }

    .doc-content ul {
        list-style: none;
    }

        .doc-content ul li {
            margin-bottom: 20px;
        }

.doc-content1 h3 {
    color: #726d7b;
}

.doc-img img {
    height: 196px !important;
    max-width: 100%;
}

    .doc-img img:hover {
        transform: scale(1.1);
    }

.doc-img img {
    -webkit-transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="homefont">
    <div class="space-after-content">
        <div class="col-md-4 col-sm-4">
            <div class="doc-img">
<img src="https://assets.pando.com/uploads/2012/12/html5-logoreal1.png">


</div>
            <div class="doc-content">
                <div class="text-center">
                    <h3>Title oneeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</h3>
                </div>
<ul>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>

</ul>
            </div>
        </div>
       <div class="col-md-4 col-sm-4">
            <div class="doc-img">
<img src="https://assets.pando.com/uploads/2012/12/html5-logoreal1.png">


</div>
            <div class="doc-content">
                <div class="text-center">
                    <h3>Title one</h3>
                </div>
<ul>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>

</ul>
            </div>
        </div>
   <div class="col-md-4 col-sm-4">
            <div class="doc-img">
<img src="https://assets.pando.com/uploads/2012/12/html5-logoreal1.png">


</div>
            <div class="doc-content">
                <div class="text-center">
                    <h3>Title one</h3>
                </div>
<ul>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>

</ul>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 152

Answers (1)

charlietfl
charlietfl

Reputation: 171679

Can loop over them and get all the heights and store the highest then set that height on all of them.

Note this doesn't take into account image loading time.

Another approach would be apply inline flexbox css to them

var maxHt = 0;
$('.doc-content').each(function() {
  var ht = $(this).height();
  maxHt = ht > maxHt ? ht : maxHt;
}).height(maxHt);
.homefont {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.home-sub-head h1 {
  color: #006ac3;
}

.home-sub-content p {
  color: #7c7f7e;
  margin-top: 15px;
  font-size: 16px;
  margin-bottom: 30px;
}

.doc-content h3 {
  color: #0a5185;
  margin-top: 0px;
  padding-top: 20px;
}

.doc-content {
  background: #f1f1f1;
  padding: 0px 15px 30px 15px;
}

.doc-content ul li:before {
  font-family: FontAwesome;
  content: "\f105";
  float: left;
  width: 1.4em;
  margin-left: -35px;
  background: #0a5185;
  margin-right: 14px;
  text-align: center;
  color: white;
  font-weight: bold;
  margin-top: 5px;
}

.doc-content ul {
  list-style: none;
}

.doc-content ul li {
  margin-bottom: 20px;
}

.doc-content1 h3 {
  color: #726d7b;
}

.doc-img img {
  height: 196px !important;
  max-width: 100%;
}

.doc-img img:hover {
  transform: scale(1.1);
}

.doc-img img {
  -webkit-transition: -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="homefont">
  <div class="space-after-content">
    <div class="col-md-4 col-sm-4">
      <div class="doc-img">
        <img src="https://assets.pando.com/uploads/2012/12/html5-logoreal1.png">


      </div>
      <div class="doc-content">
        <div class="text-center">
          <h3>Title oneeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeee
          </h3>
        </div>
        <ul>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>

        </ul>
      </div>
    </div>
    <div class="col-md-4 col-sm-4">
      <div class="doc-img">
        <img src="https://assets.pando.com/uploads/2012/12/html5-logoreal1.png">


      </div>
      <div class="doc-content">
        <div class="text-center">
          <h3>Title one</h3>
        </div>
        <ul>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>

        </ul>
      </div>
    </div>
    <div class="col-md-4 col-sm-4">
      <div class="doc-img">
        <img src="https://assets.pando.com/uploads/2012/12/html5-logoreal1.png">


      </div>
      <div class="doc-content">
        <div class="text-center">
          <h3>Title one</h3>
        </div>
        <ul>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>

        </ul>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions