5

I have a div set to hide content with overflow-x and display (visible) content with overflow-y.
Unfortunately it's not working how I'd like it to. It adds vertical scroll bars - I assume this is because overflow-x and overflow-y don't function together.

As far as I'm aware if one overflow is set to hidden, the other gets set to auto.
Is there any other way around this? So I can have the overflow hidden horizontally and displayed (without a scroll) vertically?

Just so there's no confusion here's a fiddle to explain a little more: http://jsfiddle.net/kwnQk/

edit
Here is the actual issue I'm having: http://jsfiddle.net/kwnQk/1/
I have a select box, created from divs and jQuery, that ends up going over the div height, causing it to add scroll bars.
It's a shame the overflow function works the way it does because the div's overflow-x must be hidden, causing the div's overflow-y to be auto.

edit 2
Please see this new JSFiddle to show exactly why I need the overflow: http://jsfiddle.net/kwnQk/3/
It consists of sliders too, which need to be set to a certain width. And they cannot take up the entire height of the page so I have to limit their height, too.

Richard Hedges
  • 1,180
  • 5
  • 14
  • 39
  • The desired behavior (visually) can be achieved by leaving the height of the container as auto. But combining overflow x and y the way you want may not be possible. – techfoobar Oct 17 '12 at 10:48
  • I updated the original fiddle (removed the height) and it worked. Unfortunately when adapting the site I'm working on it didn't. Please see my edit in my question. – Richard Hedges Oct 17 '12 at 11:00
  • They do function together... just not in certain combinations, as you've found. – BoltClock Oct 17 '12 at 11:02
  • In your particular case, since `overflow-x` is anyway not doing much (since your items are not that wide anyway), you can avoid it altogether and get the correct visual: http://jsfiddle.net/kwnQk/2/ – techfoobar Oct 17 '12 at 11:06
  • Did you need `overflow:hidden` because you floated some `span`s? – VKen Oct 17 '12 at 11:23
  • @techfoobar Unfortunately I can't afford hiding it as the width is greater than the example. Please see my new example: http://jsfiddle.net/kwnQk/3/ – Richard Hedges Oct 17 '12 at 11:24
  • @VKen It's all based on 'slides' and a drop down box made by divs and spans. Please see this new fiddle: http://jsfiddle.net/kwnQk/3/ – Richard Hedges Oct 17 '12 at 11:25
  • You've got a nasty problem there. I suggest a solution not by css, but by javascript (which is wrong most of the time). You'll have to move the contents of your selectbox options out of the `.slide`, when position it using absolute positioning and `.offset()`. Sledgehammer, but seems to be one of the viable solution. The other way is to make the selectbox options limited in height, and scrollable, so the slide itself doesn't have scrolling. – VKen Oct 17 '12 at 11:34
  • Can't understand why this has been marked as a duplicate, considering this question was asked before its 'duplicate'. – Richard Hedges Aug 26 '16 at 09:18

4 Answers4

2

I would think you can just leave the overflow property to visible and just use padding left and right. Unless you have images, the text should just get wrapped.

For images, you should look at using children divs with width:100%

Naman Goel
  • 1,525
  • 11
  • 16
  • The outter div is set to the screen width. The inner div has a manual width set (for example 500px). This means that because `overflow-x` is set to hidden, `overflow-y` is being reset to auto. – Richard Hedges Oct 17 '12 at 10:48
  • Please see my edit in my original question. – Richard Hedges Oct 17 '12 at 11:00
  • 1
    Yeah, the simplest solution is to use 1 div with overflow visible. Then a child div with the width 100% and height auto. And then perhaps more divs for the red and black parts.. – Naman Goel Oct 20 '12 at 19:31
1

Bad combination, unfortunately. From the documentation http://www.w3.org/TR/css3-box/#overflow-x:

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.

Alerkesi
  • 165
  • 8
0

Can you try some jQuery scroll plugins for this?

http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

http://baijs.nl/tinyscrollbar/

http://www.net-kit.com/jquery-custom-scrollbar-plugins/

Murali Murugesan
  • 22,423
  • 17
  • 73
  • 120
0

Try the jquery selectbox plugin, it's great and do exactly what you are trying to:

http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html

aleation
  • 4,796
  • 1
  • 21
  • 35