Syncing heights does not work for containers with border-box style box sizing. #2

Closed
nessthehero opened this Issue Oct 25, 2012 · 10 comments

5 participants

@nessthehero

http://codepen.io/nessthehero/full/vHKgL

Three floated divs, with variable content, are having their heights synced. Normal box-sizing works, but if it is changed to border-box, it does not correctly sync the heights.

e: better link

@ginader
Owner

Ah that sucks. Seems like the jQuery height() method has issues with the border-box box model.
Even though the current Version is claiming that it works and codepen runs on 1.7.1.

I will have to run some test.

Thanks a lot for reporting this!

@ginader ginader was assigned Oct 25, 2012
@nessthehero

No problem! I wasn't aware CodePen was 1.7.1 but I am using 1.8.1 in my current project at work, and encounted the same behavior, which led me to create the example so I could show you.

Happy to help!

@jritt

I believe I am experiencing the same issue with a twist. To start, I am using Zurb's Foundations 3 which I believe uses the box model? The twist is that this plugin works of Firefox (on Mac at least) but doesn't work on Webkit (Safari and Chrome on Mac). Def the same code is getting two different results -- Firefox vs. Webkit, but I am new to Foundation 3, so I may be missing something obvious with their CSS or even their js.

If it's at all helpful, I'd be more than glad to share my code/site.

Also, thank you for creating this plug-in, it's incredibly useful. Thank you!

@jalberto

I'm having the same problem, somebody had done some progress?

regards

@bmsq

I'm not sure about jQuery versions prior to v1.8 but I found that sync height wasn't working correctly when box-sizing was set. This was being caused by jQuery's .height() method giving the content height (excluding padding and border) but the applied min-height style for box-sizing needs to include the padding and border.

I fixed this by changing line 51 from "var val = $(this).hight();" to "var val = parseInt($(this).css('height'));". Sync height now works with my site which is built on Zurb's Foundation 3!

Hope that helps :)

@jalberto

thanks @bmsq , i'm usin foudnation3 too, but your fix doesn't works for me. I don't see any error

@ginader
Owner

Hi @bmsq, checking for css('height') doesn't solve the problem. As it doesn't actually get the height of the element but the height that you set in you CSS. I'm looking for a proper fix.

@bmsq
@bmsq
@ginader
Owner

oh hey @bmsq!
It seems I stand corrected :-)
I will do some more testing using jQuery 1.9 and box-sizing: border-box but it seems like this might be a viable solution indeed!
I must say it's weird to use the css() method to get the calculated width of an element though. Seems like an odd API decision to me...

@ginader ginader pushed a commit that referenced this issue Mar 1, 2013
Dirk Ginader v1.5 fixes issue with box-sizing: border-box
fixes issue #2
hat tip to https://github.com/bmsq for the hint
2bfbcac
@ginader ginader closed this Mar 1, 2013
@kemiga kemiga referenced this issue in nomensa/jquery.equal-heights Feb 18, 2016
Open

Equal heights doesn't work with box-sizing: border-box #8

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment