Image height calculation for its corresponding right side div

Question

I have below html structure

<div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="papers left text-center">
                    <img src="http://wowthemes.net/demo/leroy/img/dummies/18.jpg" class="imgs" alt=""><br />
                </div>
            </div>
            <div class="col-md-6">
                <div class="papers right text-center">
                    <h4 class="notopmarg nobotmarg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h4>
                </div>
            </div>
        </div>
</div>

and it produces below output in DOM

I am trying to set height of right div i.e. .papers.right based on the height of .papers.left element once the image in left div gets loaded, using below jquery technique and as you can notice in the image, the height does not get set equally on the right side.

$('.imgs').each(function () {
    $(this).on('load', function () {
         var height = $(this).closest('.papers.left').height();
         $(this).closest('.row').find('.papers.right').css({ 'min-height': height }, { 'max-height': height }).height(height);
    })
})

But unfortunately, I am not able to succeed. I don't know why but the above code doesn't respond, even after writing inside $(document).ready(). To my utter surprise, it works when I keep an alert before assigning height. So I just tried with setTimeout too but even that didn't work. Any other alternatives for this approach and if possible please explain why this isn't working?

Update

This isn't duplicate of question linked as it is pure CSS solution and am here dealing with some jquery technique and none of the solutions mentioned in the linked answer worked for me. I am not able to reproduce this problem in fiddle as it is also specific to whole site and jquery could be the one possible solution for this.

Use tables! Okay, not really, but use `display: table-row` and `display: table-cell`. I thought bootstraps grid stuff already did this, so flattening your html might work here. — Sumurai8, Sep 29 '15 at 17:46
I had luck using CSS3 flex. Have a look here: http://www.bootply.com/126437 — faerin, Sep 29 '15 at 17:48
@Sumurai8 I don't think this is some html problem, because I am trying to set `height` in `jquery` and as I said before it works perfectly if I add `alert` before setting `height`. — Guruprasad J Rao, Sep 29 '15 at 17:49
possible duplicate of [How can I make Bootstrap columns all the same height?](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) — Popnoodles, Sep 29 '15 at 17:50
@entiendoNull that seems great idea but here height for `left` div is dynamic and will be adjusted once the image is completely loaded. So possibly this is `js` solution and that is why I haven't tagged `CSS` here.. — Guruprasad J Rao, Sep 29 '15 at 17:51
@Popnoodles it doesn't actually.. Since there is single image you are trying to do or because of my website load its taking time to load images.. But wait.. Am trying your CSS solutions.. — Guruprasad J Rao, Sep 29 '15 at 17:57
@Guru But `display: flex` will make all columns the height of the *tallest* column in that row. So if you change a column, all other columns will follow. Why use jquery if you can solve it with some simple css. — Sumurai8, Sep 29 '15 at 17:57
Ok then the question is incomplete and should be edited to show enough information to reproduce the issue, or closed. — Popnoodles, Sep 29 '15 at 17:59
`css()` syntax is incorrect... should only have one object argument. Combine all properties to one object — charlietfl, Sep 29 '15 at 18:07
@charlietfl.. I think that did the trick. Thanks for the help.. Can you please post it as answer, so that I can accept it? — Guruprasad J Rao, Sep 29 '15 at 18:17

score 1 · Accepted Answer · answered Sep 29 '15 at 18:19

Your css() syntax is incorrect. When using object as argument it is one object within which you can have as many properties as needed.

Change:

.css({ 'min-height': height }, { 'max-height': height })

TO

.css({ 'min-height': height, 'max-height': height  })

Image height calculation for its corresponding right side div

1 Answers1