• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3169
  • Last Modified:

Overflow:auto for vertical only

Reduced test case, currently only FF compatible:
http://arantius.info/stat.html

I seek, in short, to eliminate the horizontal scroll bars.  I want to be able to scroll vertically but the horizontal scroll bar is ugly and wastes a lot of space.
Big plusses would be keeping the header parts visible even when scrolled down, and IE compatibility.
0
arantius
Asked:
arantius
  • 3
  • 2
  • 2
  • +1
1 Solution
 
lombardpCommented:
A quick workaround would be to reduce table width from 100% to 97%.
<table width="97%">

To keep header parts visible, just place table for header external to oflow, but still within column2. The only problem could be the column width, that is slightly different for header table and content table.

<div class="column2">

   <div>
      <table width="97%">
            <thead>
                   ....
            </thead>
      </table>
   </div>

      <div class="oflow">
            <table width="97%"><tbody><tr class="zebra1">
                         ....
                </table>
      </div>

</div>

<div class="column2">

   <div>
      <table width="97%">
            <thead>
                   ....
            </thead>
      </table>
   </div>

      <div class="oflow">
            <table width="97%">
                              .......
                </table>
      </div>

</div>
0
 
arantiusAuthor Commented:
Neither of those solutions are quite acceptable.  The not-full-width leaves a bunch of blank space between the edge of the table and the scroll bar (the real version has background colors).  And yes, the columns get screwed up when only half the table has the scrollbar in it, the headers no longer line up.
0
 
prsupriyaCommented:
Hello...

Try giving overflow:none; in .oflow css class.

.oflow {
      overflow: none;
}

Hope this helps,
S:
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
lombardpCommented:
For the moment, I have no other idea.
In my opinion the problem is the width expressed in percent, that cannot reach the pixel precision.

0
 
COBOLdinosaurCommented:
Very browser specific.  Not recommended because there is no guarantee of ongoing support:

IE will allow x an y specification

.oflow {
      overflow-x:hidden;
      overflow-y:auto;
      width: 100%;
      max-height: 12em;
      }
IE will not be able to see the mozilla specific styles because it does not understand the [attr]
rule qualifier.

.oflow[class] {
     overflow:-moz-scrollbars-none;
     overflow:-moz-scrollbars-vertical;
     }

It is a really bad hack, but if you have a design, that won't work at less than 100% width the only way to get it cross-browser is by hacking it.

Cd&
0
 
COBOLdinosaurCommented:
For the freezing the headings you need some additional hacks to account for the sizing differences.  It may not work that unstable and deadended XHTML doctype.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<style>
td, th {padding:0px; border:1px solid black;margin:0}
tr {height:25px; border:1px solid black;}
tbody {width:600px;height:300px;overflow:auto;}
thead {display: table-header-group;}
.scroller {width:615px;height:300px;overflow-y:auto;
            overflow-x:hidden; }

</style>
<script type="text/javascript">
function setWidth()
{
   if(document.all)
   {
      tabwidth=Math.max(header.offsetWidth,content.offsetWidth);
     
      header.style.width=tabwidth;
      content.style.width=tabwidth;
      val=Math.max(td1.offsetWidth,th1.offsetWidth);
      th1.style.width=val;
      td1.style.width=val;
      val=Math.max(td2.offsetWidth,th2.offsetWidth);
      th2.style.width=val;
      td2.style.width=val;
      val=Math.max(td3.offsetWidth,th3.offsetWidth);
      th3.style.width=val;
      td3.style.width=val;
      val=Math.max(td4.offsetWidth,th4.offsetWidth);
      th4.style.width=val;
      td4.style.width=val;
   }
}
onload=setWidth;
</script>    
</head>
<body>
<table style="width:600px;" id="header">
<thead>
<tr>
<th id="th1">Test</th>
<th id="th2">Hello</th>
<th id="th3">Yoohoo</th>
<th id="th4">Hmm</th>
 <![if lt IE 6 ]>
<th style="width:15px;border:none">&nbsp;</th>
<![endif]>
</tr>
</thead>
<!--[if gte IE 5]>
</table>
<div class="scroller">
<table style="width:600px;" id="content">
<![endif]-->
<tbody>
<tr>
<td id="td1">Data</td>
<td id="td2">Hello</td>
<td id="td3">I am here and so are youuuuuuuuuuuuuuuuuuuuu</td>
<td id="td4">Yoohoo</td>
</tr>
<tr>
<td>Dataaaaaaaa</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are youuuuuuuuuuuuuuuuuuuuuuu</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
<tr>
<td>Data</td>
<td>Hello</td>
<td>I am here and so are you</td>
<td>Yoohoo</td>
</tr>
</tbody>
</table>
<!--[if gte IE 5]>
</div>
<![endif]--></body>
</html>


Cd&
0
 
arantiusAuthor Commented:
It doesn't have to be 100%, it just has to be two columns that line up (i.e. same width).  And of course fixed pixel widths won't do.

And to be clear, this is a completely brand new page.  Make up all the html and css you want.  I would just like two even columns, with scrolling sections.  Again, the link is a barebones example.  The real page has many (5 ish) rows of these scrolling sections.
0
 
COBOLdinosaurCommented:
IE and FF do not calculate the widths the same way and they are not going to render the same.  

There are 4 options; take your pick.  
1. You use hacke to manage teh scroll bars.
2. You use hacks to specifiy alternate sizing.
3. You do browser detection and use alternate style sheets.
4. You change the design so that it renders the wa you want it one broswers and degrades acceptable in the other.

If you come up with another viable option let me know and I ell add to my list for the next time the question gets asked.

Cd&
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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