Add vertical scroll bar to a table

[rhenig]

Hi,

I have a checklistbox in a table's cell.
This checklistBox get its values dynamically from the database, by using DataBind().

Currently, all the results are listed in a long list. I would like to define a fixed height (or a max-height), and have a scrollbar in the list to navigate.

I added the following to the css file:

#content-container table.override
{
width:150px;
min-height:50px;
max-height:200px;
overflow:scroll;
border-color:Silver;
border-style:Double;
background-color:Lime;
}

But it doesn't help.
I don't know what else should I try.

I'm working with asp.Net 2.0.

Thanks in advance,
Rache

[MattEvans]

I honestly can't say why; but I find that overflow:scroll/auto only works reliably on fixed size div elements. It works ok on 'bounded' size divs (with max and min height) in Firefox 2 and Opera 9, but not in Internet Explorer 6.

Change your HTML so that the cell with the scrollable list has a div between the cell and the data, and apply the size and overflow CSS settings to the div rather than the table cell:

<td id="content-containertable" class="override">
<div>
[lots of lines]...<br/>...
</div>
</td>

#content-containertable.override{
  width:150px;
  border-color:Silver;
  border-style:Double;
  background-color:Lime; 
}
#content-containertable.override div{
  height:200px;
  overflow:scroll;
}

Try with a fixed-height div first, especially if you might be targetting IE6 users. Also, try overflow:auto instead of overflow: scroll; it's nicer because the scrollbars only appear when neccessary.

As said, I honestly have no firm evidence that it categorically doesn't work on table cells; indeed, overflow:hidden seems to work on fixed width table cells to hide superflous content. However, oveflow:scroll has never worked for me on table cells, even when the height of the table cell is fixed.

Maybe it works on other elements aswell as divs, but I haven't experimented that much.

[rhenig]

Thanks a lot!!!
Adding a <div> element at the HTML part of the ascx file solve the problem.

<td valign=top style="height: 47px; width:130px;">
<div style="height:200px; overflow:scroll">
<asp:CheckBoxList ID="chkLBType" runat="server" EnableTheming="True" CssClass="override" Width="100px">
</asp:CheckBoxList>
</div>
</td>

[DanyalRaja]

working fine with div:cool: