Menu
(First question on Stack Overflow. Hope I'm doing it right.)
I'm trying to create a floating menu that inherits its width from its content (since I don't know the width in advance, i.e. loaded from a URL). I can do this by having the menu div absolutely positioned without setting a width or height.
The problem occurs when the content is tall enough to require scrolling. I set "overflow: auto;" so that it can be scrolled vertically, but the new scrollbar doesn't make the div wider. Instead, the div stays the same width, and the scrollbar juts into its previously nicely sized content, forcing the content to wrap.
Example: http://jsfiddle.net/w7Mm8/
In the example: in Firefox, "five" gets wrapped onto the next line, but in Chrome (for Mac at least), its all shown on one line.
Any elegant way to do this without explicitly setting the width of the menu to include the width of the scrollbar?
THANKS!
468
Using width, max-width and margin: auto; Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins: This <div> element has a width of 500px, and margin set to auto.
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
You need to add style="overflow-y:scroll;" to the div tag. (This will force a scrollbar on the vertical). Save this answer.
To get the width of the scrollbar, you use the offsetWidth and clientWidth of the Element : The offsetWidth returns the width of the Element in pixels including the scrollbar. The clientWidth returns the with of the Element in pixels without the scrollbar.
You have a few options.
Use white-space:nowrap; and some padding.
Use overflow: scroll;, which adds an extra scrollbar on the bottom, but fixes the wrapping problem in Firefox.
Use overflow-y:scroll which is CSS3 and is supported by only modern browsers.
89
By chance I stumbled on this. Setting white-space: normal actually made Firefox push the scroll bar outside. See http://jsfiddle.net/w7Mm8/36/.
Edit: Wait... not with only five (the previous fiddle had six words): http://jsfiddle.net/w7Mm8/37/. Somehow, the extra word caused it to behave.
Edit2: Based on the bizarre observation above (the white-space: normal did not really have anything to do with it, it was the extra word), there is a bizarre "workaround" that may prove useful to some people (and a pain for others). See (five words) http://jsfiddle.net/w7Mm8/49/, (six words) http://jsfiddle.net/w7Mm8/57/. The content must be set to 3 characters and cannot be spaces (from my experiments). Note: the pseudo element has to be where the text content is, however deep that is, see: http://jsfiddle.net/w7Mm8/58/ where it does not work.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
