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?

Answer 1

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.