How to put an Vertical scrollbar within asp:Repeater ItemTemplate?

Question

I have inherited an .ascx control that consists of an asp:repeater construct containing a HeaderTemplate, an ItemTemplate and an empty FooterTemplate.

Both the header and the item templates are linked to a data source.

My question is simply this, I want to have a vertical slider applied to the ItemTemplate such that I can scroll up and down the items contained within whilst the HeaderTemplate remains static.

I have tried using an asp:Panel within the ItemTemplate but this doesn't render the row within the template.

I've resorted to encapsulating the whole of the asp:Repeater within an asp:Panel that specifies a vertical scrollbar. This works but scrolls the header out of view if the number of rows in the ItemTemplate is large.

If anyone can help and suggest a way forward I would be most grateful.

Answer 1

It can be done in a simple manner with some CSS tricks e.g.

Repeater Item Template Markup

<HeaderTemplate>
  <div class="template">
</HeaderTemplate>
<ItemTemplate>
    Your Stuff
 </ItemTemplate>
<FooterTemplate>
  </div>
</FooterTemplate>

CSS Defined for "template"

.template {
   height: 200px;
   overflow-y: scroll;
}

Hope this will help !!