0

I have a ul that is set to display inline-block and list elements that are set to display inline block.

The ul is set to have a width of auto so it shrinks if the container does (responsive).

The list items are set to be auto width of their content which is set to whitespace nowrap and so if they dont all fit in a line they drop down to the next line.

I am trying to detect with jQuery if this is happening. So I am getting the inner width (using width()) of the ul and the calculating the total width of each li by getting each outerWidth() and adding them together. Then I check if the total li width is greater than the inner width of the ul.

But heres the problem, jQuery is returning a value of 933.6800003051758 for the nav's inner width and a value of 934 for the list items. So you'd think that the list items would be breaking onto a second line- but they aren't! So I suppose that the browser is rounding up the nav's innerwidth to be 934.

What I'd like to know is, if I round up the nav's inner width before I compare the value to the total list items width will that be reliable or will my function sometimes think the list items are not breaking on to a second line when in fact they are?

David O'Sullivan
  • 2,969
  • 4
  • 21
  • 24
  • Can you shortly describe why you want to observe this? listening to window.resize events might be expensive, and if your layout is responsive what for is the detection? Mediaqueries might be a better solution for this. – axel.michel Dec 03 '14 at 18:37
  • its for a menu that the user can create. so what I want to do is make it so that if the items are breaking on to two lines that the menu items get a equal percentage width so that they continue to display on one line, up until the next breakpoint, where the menu layout changes from a dropdown style one to an accordion style one. This is so that, if possible, on tablets in portrait mode for example, the menu still shows as a dropdown... its an enhancement to flexNav that makes it possible for the list items to not have to be the same size if the space permits (and if thats what the user wants) – David O'Sullivan Dec 03 '14 at 18:49
  • I'm using media queries already for the breakpoint between medium screens to small screens, but this is for medium to large- and I cant use a media query for that as I dont know how many items will be in the menu or how long the labels will be – David O'Sullivan Dec 03 '14 at 18:51
  • Interesting problem, tried to emulate something like this in a fiddle but can't get produce subpixel in jQuery - only in case I use native calculation with getBoundingClientRect, can you build an example? Here is my try: http://jsfiddle.net/p0k0rzkj/1/ – axel.michel Dec 03 '14 at 19:47
  • @DavidO'Sullivan It sounds like what you want is a `flexbox`. http://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Josh Burgess Dec 03 '14 at 19:58
  • @JoshBurgess I had forgotten about that option, I'll give it a whirl- looks very promising... – David O'Sullivan Dec 03 '14 at 20:26

0 Answers0