asked on

Horizonal Scroll bar for div tag

Hello,

I'm trying to get the horizonal scroll bars to work when I have a table that is wider than the div tag its contained in is displayed. I've used the html and css shown below.
The table is created dynamically and would be displayed in the Label.
When the width of the div tag is set to a fixed value, the scroll bars are shown. However the width of the
div tag can't be set to a fixed value as it needs to adjust to varying screen sizes.

<style type="text/css" media="screen">
.ResultsTableDiv {
border: solid 1px #466094;
height: 100%;
width: 100%;
overflow: auto;
background-color: #FFFFFF;
}
</style>

<div class="ResultsTableDiv" >
<table cellspacing="0" cellpadding="0" border=1 width="100%" >
<tr>
<td>
<asp:Label id="ReportResults" Runat="server"></asp:Label>
</td>
</tr>
</table>
</div>

rvlem

Using the 'height: 100% ' will not work properly for what you are trying to achieve. I found that the only right way to do it is calculate the required height dynamically.

For that, use a javascript routine that you place at the bottom of your page.

Then, you need to event handlers in your <body> tag as follows:

<body onload="calculateSize()" onresize="calculateSize()">

The 'onload' handled calculates the div height when your page loads, the 'onresize' when you resize the browser.

How you do the calculation depends a lot on what your page looks like. You can use body.clientHeight to determine the available height for your div. From that you then have to substract the clientHeight of whatever other elements you have in your page, such as header and footers. Usually, you then have to substract a constant to fine-tune it. It is the easiest if you put all your other content in DIV tags, too.

Example, substracting the height of a header div and a footer div.

<script language="javascript">

function calculateSize()
{
document.all.resultsDiv.height = document.body.clientHeight - headerDiv.clientHeight - footerDiv.clientHeight - 40;
}

</script>

If you can't get this to work, then try sending me the entire page and I can give a more detailed explanation.

Roel

ASKER CERTIFIED SOLUTION

rvlem

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

MrRio

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial