Member Avatar for 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

  • 3 Contributors
  • 3 Replies
  • 1K Views
  • 4 Years Discussion Span
  • Latest Post Latest Post by DanyalRaja

Dani AI

Generated

Quick recap: was right — the reliable fix is to put the generated CheckBoxList inside its own block-level container and give that container the scrolling rules. Tables (and table cells) are historically unreliable scroll containers across browsers, so isolating the list in a block element prevents the layout from forcing the list to expand.

Example pattern (keeps markup and CSS separate, uses vertical-only scrolling and a max-height):

<div class="chklist-scroll">
  <asp:CheckBoxList ID="chkTypes" runat="server" CssClass="chkItems" RepeatLayout="Flow" />
</div>
.chklist-scroll {
  max-height: 180px;        /* lets container shrink/grow up to this limit */
  overflow-y: auto;         /* vertical scrollbar only when needed */
  overflow-x: hidden;       /* avoid unwanted horizontal scrollbar */
  -webkit-overflow-scrolling: touch; /* smoother touch scrolling on iOS */
  box-sizing: border-box;
  border: 2px solid silver;
  padding: 6px;
  background: #e9f8e9;
}

.chkItems { display: block; margin: 0; padding: 0; }

Troubleshooting tips:

  • Inspect computed styles in dev tools to confirm the wrapper actually has a max-height and overflow-y set.
  • If the CheckBoxList still stretches the wrapper, set RepeatLayout="Flow" (avoids table markup) or keep the wrapper but style the generated element with display:block.
  • For older IE quirks, a fixed height sometimes behaves more predictably than max-height; zoom:1 can help trigger layout in ancient IE.
  • Confirm generated HTML includes proper labels for accessibility; adjust rendering if needed.

This approach is responsive and mobile-friendly, and it matches the working result reported by and confirmed later by .

Recommended Answers

All 3 Replies

Member Avatar for 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.

Member Avatar for 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>

Member Avatar for DanyalRaja

working fine with div:cool:

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.