Overflow:auto doesn't display horizontal scrollbar

Question

I have a gridview that has some 20 columns and 1000 rows. The grid is placed under <div> tag. Due to such large figures, the div shows the vertical scrollbars, which is fine but it doesn't show the horizontal scrollbar.

The css written for div is as;

.divCSS{
display:block;
position:relative;
width: auto;
height: 5em;
margin:0;
padding:5px;
background:inherit;
color:inherit;
overflow:auto;
}

The entire <div> code is as below;

<div id="divGrid" align="left" style="border: solid 1px gray; width: 790px; height: 420px;" class="divCSS">

Despite giving overflow:auto, why i don't see a horizontal scrollbar?

Maybe if you give the grid view a width that's larger than 790 pixels... — BoltClock
– BoltClock, Commented Sep 8, 2011 at 5:03
Dont forget to mark answer as accepted if you got the info you want — Pranay Rana
– Pranay Rana, Commented Sep 9, 2011 at 7:11

TCH · Accepted Answer · 2023-04-06 10:28:08Z

2

If you have a fixed width and have set your overflow to the value auto then, to quote the W3C:

The behavior of the 'auto' value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.

In other words, your scroll behaviour may vary depending on the browser. Given you've defined both a fixed height and width, your browser will wrap your text so that it doesn't impact adjacent elements and does the minimum to ensure it merely supports a visible scrolling mechanism to display such that users could access the clipped content.

If you want to see the horizontal scroll bars, you need to include content length that cannot wrap and exceeds your specified element width, such as an image or by specifying white-space: nowrap on one of your contained elements (e.g. a paragraph).

Have a look at this example for an illustration of how it works.

edited Apr 6, 2023 at 10:28

TCH

7691 gold badge9 silver badges35 bronze badges

answered Sep 8, 2011 at 5:20

Phil.Wheeler

16.9k10 gold badges103 silver badges157 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Niraj Chauhan · Accepted Answer · 2011-09-08 05:06:11Z

2

Give the width of the div specific and set overflow-x:visible;

answered Sep 8, 2011 at 5:06

Niraj Chauhan

7,96012 gold badges48 silver badges78 bronze badges

Comments

Pranay Rana · Accepted Answer · 2011-09-08 05:05:48Z

1

REmove

width: auto;
height: 5em;

from your divCSS class

and for scroll to apper you need content width more than 790px and hight more than 420px.

answered Sep 8, 2011 at 5:05

Pranay Rana

177k37 gold badges244 silver badges267 bronze badges

Comments

Anantha Sharma · Accepted Answer · 2011-09-08 05:17:51Z

1

try { overflow-x:scroll; overflow-y:scroll; }

answered Sep 8, 2011 at 5:17

Anantha Sharma

10.1k4 gold badges35 silver badges35 bronze badges

Collectives™ on Stack Overflow

Overflow:auto doesn't display horizontal scrollbar

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related