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
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!
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!
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!
I'm having the same problem, somebody had done some progress?
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 :)
thanks @bmsq , i'm usin foudnation3 too, but your fix doesn't works for me. I don't see any error
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.
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...
v1.5 fixes issue with box-sizing: border-box
fixes issue #2
hat tip to https://github.com/bmsq for the hint