[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1863
  • Last Modified:

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>
0
prosperion
Asked:
prosperion
  • 2
2 Solutions
 
rvlemCommented:
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
0
 
rvlemCommented:
Sorry, just noticed you were asking for width not height. Well, it does not make a difference. Just use the same eventhandlers and javascript function, use body.clientWidth to determine available width, deduct width of whatever other objects you have on the same horizontal line and some extra for margins and such...

Roel
0
 
MrRioCommented:
Set a fixed height:

.ResultsTableDiv {
  border: solid 1px #466094;
  height: 300px;
  width: 100%;
  overflow: auto;
  background-color: #FFFFFF;
}

And remove the width from your table:

<div class="ResultsTableDiv" >
     <table cellspacing="0" cellpadding="0" border=1>
          <tr>
            <td>
              <pre>Test content. fsdfsdf shdfjk sdhfkj sdhfkj sdhfkj sdhfkjs dhfskjd fhskd vdgsh fsgd ff sdgh jdsff</pre>
            </td>
          </tr>
        </table>    
</div>

This will give you horizontal scrollbars. I will need to see the code generated by your ASP.net Label if this doesn't work.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now