Add Scroll To Div

Hi…
New Here … Is it the right room to post this question…

Having a hard time making the scroll to work.

<div style=“width:100%;border:1px solid gray;padding:1%”>
<fieldset style=“border:1px solid gray;border-radius:5px”>
<div style=“overflow-x:scroll”>
<asp:GridView runat=“server” width=“100%”>
</asp:Gridiew>
</div>
</fieldset
</div>
The columns in the grid are added dynamically
I would like the Main Div, Fieldset and the second div widths to stay intact. When the columns increase, a scrollbar should appear for the div to scroll horizontally.
The problem is, though there are many columns, they keep adjusting within the grid width and hence the scroll doesnt show up at all.

Any Help? Thank you

Hi, welcome to Sitepoint :slight_smile:

I think we may need to see a couple of examples with data in the columns so that we can suggest something suitable.

At the moment the inner elements won’t force a scrollbar because they have no width in which to contain something. The only way a scrollbar would work in your structure was if it was on the parent.

e.g.


<div style="border:1px solid gray;padding:10px;overflow-x:scroll">
		<fieldset style="border:1px solid gray;border-radius:5px">
				<div>
						<div style="width:700px;background:red;height:100px">test</div>
				</div>
		</fieldset>
</div>

If you don’t control the overflow on the parent then it will just collapse and will not be held open by a child of greater width unless you set a min-width equal to the largest fixed width element inside.

I’d really need to see examples of the data in the various columns to suggest anything better as I may be barking up the wrong tree:)

Thank you. Its just columns with text, something like
<div style=“width:100%;border:1px solid gray;padding:1%”>
<fieldset style=“border:1px solid gray;border-radius:5px”>
<div style=“overflow-x:scroll”>
<table width=“100%”>
<tr>
<td>Casual Leave</td>
<td>AnnualLeave</td>
<td>SickLeave</td>
<td>Compassionate Leave</td>
<td>Maternity Leave</td>
<td>Another Leave</td>
<td>Some Other Leave</td>

       &lt;tr&gt;
    &lt;/table&gt;
 &lt;/div&gt;

</fieldset
</div>

I want the scroll bar to be just for the inner div and not the outer one.

Hi,

Lose the fieldset as that is only for wrapping form elements and do this:


<div style="border:1px solid gray;padding:1%">
		<div style="border:1px solid gray;border-radius:5px">
				<div style="overflow-x:scroll;margin:5px;">
						<table width="100%">
								<tr>
										<td>Casual Leave</td>
										<td>AnnualLeave</td>
										<td>SickLeave</td>
										<td>Compassionate Leave</td>
										<td>Maternity Leave</td>
										<td>Another Leave</td>
										<td>Some Other Leave</td>
								<tr>
						</table>
				</div>
		</div>
</div>


You can’t add padding and borders to a 100% width either as it will be too big (unless you want to use box-sizing:border-box).

Thank you, but the problem persists.
Please check the same code in browser and you would know what I mean.
When I add a second set of 7 columns, they shrink & fit. If I add a 3rd set, they shrink but only then the scroll appears.
Meaning, it extends only after a certain length (maybe some 1000px).
Is it not possible to have a fixed width for td as they keep increasing.

sharpcnet,

Can you post a link to the working code?

Please notice the attached screen shot showing several rows of 7 columns each. This is the page that Paul’s code produces. At the width shown, the x scroll bar is just triggering. If wider, the scroll bar is not triggered.

Can you please post a link to your working code so we can see what you see?

Do you think I didn’t test in a browser before offering the code ?

As Ron said above the code above is working fine so now its your turn to supply the code that is not working:)