[Solved] Why no scroll bar when using a div within a div ?

[coolbawn]

I have a contained div “Options” within a wrapper div. If the contained div has a height which is greater than the height of the wrapper div, surely the wrapper div should display a vertical scrollbar if I set overflow:auto ? Not for me it doesn’t ! Here’s my code:

<div style='width:100%;height:653px;overflow:auto'> 
<div style='width:100%;height:990px'> </div>
 </div> 

Actually the “990px” is a variable which is sometimes more and sometimes less than the wrapper div’s height of 653px. I have changed widths and set overflow:scroll for both divs to ensure that I can see any scroll bars but the scroll bar area is never filled with a scroll bar. I’m testing with Opera 12.16 and IE8. I don’t want to rely on CSS3 as my target browsers will be old.

In case you are wondering why I set the height of the contained div… I have to populate it with a variable number of rows of option buttons. I calc the height of the div to fit these rows then call a .css which positions the buttons’ top as a % of the height.

Thanks for any help. Very frustrating – as all incorrect programming is !

[Paulie_D]

Not sure why you are adding 100% width to the divs…that’s default.

I can see any scroll bars but the scroll bar area is never filled with a scroll bar

I’m not sure what this means….are you saying that you NEVER see a scrollbar?

Otherwise, the scrollbar ‘thumb’ element will never be 100% of the scroll track height…that would be redundant.

If you always want a scrollbar whether it’s needed or not, use overflow:scroll.

I think we need an image of what you are actually seeing.

[coolbawn]

Thanks v much Paulie_D

I can’t see a way to attach a screenshot in the forum so you can download it here: http://www.around-the-world.co.uk/public/Screenshot2.jpg

The HTML (created by PHP) which produced that page was:

<div id='OptionsWrapper' style='position:fixed; top:120px;left:0px; width:100%; height:653px; overflow:scroll; z-index:999;'>

<div id='Options' style='position:fixed; top:120px;left:0px; width:98%; height:$options_height; overflow:scroll;'>
</div>
</div>

The resultant HTML is valid, according to Opera

In the screenshot:

There should be 30 buttons laid out according to the .css file at: http://www.around-the-world.co.uk/public/atwmenu30.css

The 15 buttons shown are fine. The problem is that I can’t scroll down to the other 15.

You can see 2 scrollbars – one for each div.

I would expect the inner scrollbar area (belonging to the Options div) to be “empty” – as it is – because $options_height is calculated as 990px which is enough to hold all 10 rows of buttons.

I would expect the outer scrollbar area (belonging to the OptionsWrapper div) to contain a scrollbar as the Options div has a greater height (990px) than the OptionsWrapper div (currently set at 653px to match my small laptop).

Yes, I can get rid of default code eventually but I’m leaving it in so I can test with different values eg to display the 2 scroll bar areas side-by-side.

I won’t always want a scrollbar; I just set overflow:scroll so the test displays the scrollbar area even if there’s no scrollbar.

Thanks so much for any help you can give me.

[coolbawn]

Ah yes, Link is where I should have attached files. Sorry !

[Paulie_D]

overflow:scroll.

That means that the scroll bars will show up whether they are needed or not.

However, the fact that they both have fixed position is probably the root cause.

http://codepen.io/Paulie-D/pen/fGspE

[coolbawn]

Thanks and sorry for lack of clarity Paulie_D. During testing, I intentionally display both scrollbar areas so I can see what’s going on (or not). What you see in the screenshot are the divs’ scrollbar AREAS (I don’t know a tec term for them) – not actual scrollbars. After testing I will set overflow:auto.

My problem is that the wrapper div doesn’t display an actual scrollbar even though its fixed height (653px) is less than the height of the “contained” div Options (in this case 990px), which I would expect to trigger the display of a scrollbar. Therefore a user can’t scroll down to the next 5 rows of option buttons in the Options div.

Just in case the big picture helps ….

Each menu page has a variable number of option buttons (sometimes well over 100) which I want to display; in this example there are 30 buttons in 10 rows of 3 buttons per row.

The top of the screen including the “Previous page” and “Top page” buttons is defined in a fixed div and is fine.

I don’t know how best to use css to position a variable number of rows of buttons, so I:
– calculate the height of the Options div (I have deliberately spaced out the rows in the test so I HAVE to scroll)
– refer the php script to a css file (in this case the above-mentioned atwmenu30.css) which positions the top of each button as an absolute % of the height of the Options div.

I need to avoid using CSS3’s multiple columns as the target browsers will be old. The above may not be the best way to use css (it means that I have to define lots of css files) but I’m surprised and depressed that it doesn’t display an actual scrollbar, which is all that I need for it to work !

Any flashes of genius ? Can you see any fundamental misunderstanding of how css works ? Many thanks anyway.

[Paulie_D]

Edited my previous post.

It’s definitely the fixed positioning on the Options div.

See the Codepen.

[coolbawn]

Spectacular success ! Thank you SO much. I’m guessing that you’re in Ireland. Wherever you are, you’re a saint !

[Paulie_D]

Nope…England.

…and yes, I am.

[Author]

Posts