Yet Another Blog on ASP.NET and Some Other Stuff

Locking ListView’s Header and Footer with CSS

Posted in ASP.NET, ListView, Web Development by Mustafa Basgun on January 1st, 2008

Due to some usability issues and real estate gains on the user inteface, I was thinking to find a way to lock the header (and footer as well if applicable) of a ListView control. After some googling, I found a great resource by Brett Merkey which can be easily implemented to the ListView.

I am not a CSS guru but I was brave enough to play around with the original CSS that I got from that resource, and organized my ListView’s LayoutTemplate as:

Newly modified CSS code is:

After debugging the application file with this new stylesheet, I have:

Download

I have tested my sample code with Firefox, IE6 and IE7; and everything was seeming to work fine. You can download it via here.

5 Responses to 'Locking ListView’s Header and Footer with CSS'

Subscribe to comments with RSS or TrackBack to 'Locking ListView’s Header and Footer with CSS'.

  1. Rasheed said, on January 4th, 2008 at 4:39 pm

    I wasn’t get same listview. Header and footer locking but scroll is different.

  2. Mustafa Basgun said, on January 4th, 2008 at 5:53 pm

    Rasheed,

    The last screenshot was captured via Firefox. Since different browsers have different interpretations for some CSS objects, the result might be different in IE (if that’s your case). I guess - as long as header and footer rows are locked, you should be fine.

  3. William Feng said, on January 6th, 2008 at 1:43 am

    Hi Mustafa,

    Can you explain what it does in details?

    expression(parentNode.parentNode.offsetHeight >= offsetParent.offsetHeight ? 0 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop : 0);

    Best, William

  4. Mustafa Basgun said, on January 6th, 2008 at 12:42 pm

    William,

    As mentioned at the beginning of this post, the CSS part of my sample code was taken from here:

    http://home.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html

    According to this resource, IE may have some problems with the screen behavior of the footer row in an HTML table. That expression is for having a modern footer in IE6 and IE7.

    Hope this helps.

  5. Yogi said, on June 23rd, 2008 at 4:30 am

    How can I get the scroll offsets for the table?

Leave a Reply