How can i get the highest div inside a Bootstrap row

Question

I want to apply a border to the highest div inside a Bootstrap row. Below is my code (as an example):

<section>
    <div class="row">
        <div class="col-md-6">
            <strong><span style="color:#f77f00;">TIP 1:</span> blahblahblah</strong>
            <p>dnijengeinjkdngkjdfnsdmnvjkgnkjnvjkerngeiuj <br/>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="col-md-6">
            <div class="embed-responsive embed-responsive-16by9">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/4ZT2AXgGzAU?start=77" frameborder="0" allowfullscreen class="embed-reponsive-item"></iframe>
            </div>
        </div>
    </div>
</section>

In some cases, the Youtube video DIV (class="col-md-6") is the highest, while in other cases the text div (class="col-md-6") is the highest. (When you are viewing it on tablet for instance)

What is the best solution to determine the highest div, find out on which side it is (left/right) and apply a border to left or right (depending on which side it is)?

Here is an example of what I mean.

As you can see, the middle line is not all the way to the bottom. I want it to go all the way to the bottom and I have found a solution to this:

section {
    padding: 30px;
    border: 1px solid gray;
    margin-bottom: 45px;
}

section .row {
    border: 1px solid gray;
}

section .row > div:last-of-type {
    border-left: 1px solid gray;
}

section .row > div:only-child {
    border-left: 0;
}

@media (max-width: 991px) {
    section .row > div:last-of-type {
        border-left: 0;
    }
}

But this only works, if the div to the right is higher than the left div (as you can see in the example)

If my question is not clear or incomplete, please let me know.

EDIT: Why is my post downvoted? I do not understand why.

"Highest" as in the first element within the row, or "highest" as in the tallest element? — APAD1, Apr 24 '17 at 14:39
I have added my CSS, I hope the question is more clear now. Sorry for this — Johnnybossboy, Apr 24 '17 at 14:40
Highest bro, 4/20 blaze it, jokes aside this question has been answered http://stackoverflow.com/questions/1076231/how-to-get-height-of-the-highest-children-element-in-javascript-jquery — Aldin Juko, Apr 24 '17 at 14:42
Better way to resolve this issue would be to [set up equal height columns](http://stackoverflow.com/questions/34553621/bootstrap-equal-height-column). — APAD1, Apr 24 '17 at 14:42

Zhenya Telegin · Accepted Answer · 2017-04-25T16:50:01.823

Here is jsfiddle.

On page load we call the function findHighestDiv().

window.onload = findHighestDiv();

We are looping through each element with class row.

const findHighestDiv = () => {
  let rows = document.querySelectorAll('.row');
  for (let i = 0; i < rows.length; i++) {
  }
}

Inside every row we have two divs: text and video.

const findHighestDiv = () => {
  let rows = document.querySelectorAll('.row');
  for (let i = 0; i < rows.length; i++) {
    const textDiv = rows[i].querySelectorAll('.text');
    const videoDiv = rows[i].querySelectorAll('.video');
  }
}

To get height of this divs we use offsetHeight.

const findHighestDiv = () => {
  let rows = document.querySelectorAll('.row');
  for (let i = 0; i < rows.length; i++) {
    const textDiv = rows[i].querySelectorAll('.text');
    const videoDiv = rows[i].querySelectorAll('.video');
    const textDivHeight = textDiv[0].offsetHeight;
    const videoDivHeight = videoDiv[0].offsetHeight;
  }
}

Then we compare them to get highest height and set border using style.borderRight or style.borderLeft.

const findHighestDiv = () => {
  let rows = document.querySelectorAll('.row');
  for (let i = 0; i < rows.length; i++) {
    const textDiv = rows[i].querySelectorAll('.text');
    const videoDiv = rows[i].querySelectorAll('.video');
    const textDivHeight = textDiv[0].offsetHeight;
    const videoDivHeight = videoDiv[0].offsetHeight;
    if (textDivHeight >= videoDivHeight) {
      textDiv[0].style.borderRight = '1px solid gray';
    } else {
      videoDiv[0].style.borderLeft = '1px solid gray';
    }
  }
}

Sorry, snippet inside post didn't work idk why :(

How can I do this when I have multiple rows containing the same class names? For example (I do not know if this is formatted correctly):

text

video

text

video — Johnnybossboy, Apr 25 '17 at 07:38
@Johnnybossboy I update my post. Also [here is new jsfiddle to solve your problem](https://jsfiddle.net/teleginzhenya/onmbxbs6/). All description above ^^ have fun — Zhenya Telegin, Apr 25 '17 at 16:51

score 0 · Answer 2 · answered Apr 24 '17 at 14:43

0

Use display:table-cell for both divs. that way they'll always be the same height.

.row {
  display:table
 }

.col-md-6 {
  display:table-cell
}

answered Apr 24 '17 at 14:43

Sammy

3,059
4
23
32

John Doe · Answer 3 · 2017-04-25T12:05:59.093

You can try this script. It equalizes your columns, so you can give the border to any columns, doesn't matter. You can also put this in a function and use it everytime the windows resizes. I didn't have time to test it out because I type this in a rush, but it should work.

$('section').each(function(index, element) {
        var leftColumnHeight = $(element).find('.row .col-md-6:first-child').height();
        var rightColumnHeight = $(element).find('.row .col-md-6:last-child').height();

        if(rightColumnHeight > leftColumnHeight){
            $(element).find('.row .col-md-6:first-child').height(rightColumnHeight);
        }

        if(leftColumnHeight > rightColumnHeight){
            $(element).find('.row .col-md-6:last-child').height(leftColumnHeight);
        }
    });

EDIT:

I can't leave a comment but i'll say this here, you can modify this script into a function and use it on as many rows as you like. For example you can add an extra class to the columns you want to be equalized, for example:

<div class="col-md-6 equal-column">

and change the script to this, so it works with any columns, not just col-md-6:

 $('section').each(function(index, element) {
            var leftColumnHeight = $(element).find('.row .equal-column:first-child').height();
            var rightColumnHeight = $(element).find('.row .equal-column:last-child').height();

            if(rightColumnHeight > leftColumnHeight){
                $(element).find('.row .equal-column:first-child').height(rightColumnHeight);
            }

            if(leftColumnHeight > rightColumnHeight){
                $(element).find('.row .equal-column:last-child').height(leftColumnHeight);
            }
        });

How can i get the highest div inside a Bootstrap row

3 Answers3