<div> overflow:auto does not show scrollbar until resize

C

6

13

I have a element on my form that looks like this:

<div style="overflow-y:auto;overflow-x:hidden;height:100%;width:100%">

In IE7 when the page first renders, there are no scrollbars. However, if I resize the page (even just 1 pixel) the scroll bars appear properly.

Is there something I can do so that the scrollbars show properly when the page first displays?

Colin answered 13/8, 2009 at 17:19 Comment(6)

I realize I'm almost a year late on this one, but I'm having the same problem. Any solution to this? – Grove 17/6, 2010 at 21:28

I am facing the same issue.. any ideas? – Heliogabalus 9/2, 2011 at 20:35

Sounds like there is a bigger issue. Can you post a link or some HTML? I suspect you have another problem. – Hoag 15/2, 2011 at 16:30

Well if you are really desperate you could use some javascript to auto resize the window. – Bach 15/2, 2011 at 22:5

This only happens in IE7? Not IE8, Chrome, or FF? – Hyson 15/2, 2011 at 23:6

I can't reproduce this in IE7. You need to post more code. – Braud 16/2, 2011 at 16:53

S

11

Set overflow-y to "scroll" if you always want a scrollbar.

Swarm answered 13/8, 2009 at 17:21 Comment(4)

I could do that, but I only want the scrollbar to show if it's necessary. – Colin 13/8, 2009 at 17:22

is there overflowing content when the page is first rendered? – Swarm 13/8, 2009 at 17:23

Yes, the page that loads initially is larger than the container and should cause an overflow. – Colin 13/8, 2009 at 17:25

is content added to the div after it would have been parsed (the inline css interpreted)? – Swarm 13/8, 2009 at 17:30

U

6

That's the kind of problem which comes from the hasLayout bug in IE6 and IE7. It affects how IE renders the page. To get rid of the problem, you should consider reading this great page about the hasLayout behavior and its hacks. There's also the official Microsoft hasLayout dedicated page.

The hacks suggested are height: 0; and zoom: 1; depending on the version of IE you want to target and the type of your element.

Useless answered 16/2, 2011 at 0:24 Comment(0)

P

2

You should add margin-right: 20px to your style, so the scrollbar will have enoguh place to be displayed.

Priest answered 19/9, 2009 at 22:41 Comment(1)

Why 20px? The scrollbar width isn't the same on all browsers and operating systems. I realize Snus has left the building, but it would be better to calculate the scrollbar width instead of using some fixed value. – Jiffy 27/6, 2014 at 1:46

P

2

I used overflow: scroll and it fixed my issue with the disappearing scrollbar on load. My tables are dynamically created and should scroll automatically when the page loads as I have enough data to start with.

I didn't have to make any other changes. Now it works in all three browsers IE7, IE8 and FF.

Purchasable answered 12/4, 2011 at 17:53 Comment(0)

R

1

Try Internet Explorer 9 and see if your current script works there. Most probably it does work there, and if so, you might rethink your inner desire to make it all compatible with previous versions of Internet Explorers like 7 etc

With Chrome and FireFox stealing away audiences from IE to fast, I forecast that its only a matter of time that before such questions will be obsolete...

Rosabelle answered 16/2, 2011 at 18:55 Comment(1)

As long as IE6 +IE7 +IE8 make up a big chunk of your audience, you should always think about them. And as long as many XP users won't upgrade (IE9 doesn't work on XP) these issues won't be obsolete for many years from now. – Phillida 23/3, 2011 at 0:37

T

1

try absolute widths and heights, upon resize IE7 may be calculating the dimensions itself when you go to resize to page, whereas on page load it isnt...

Templetempler answered 6/4, 2011 at 16:5 Comment(0)

Recommended topics

Hot tags