Reflections on Software Development

Personal Blog of Mustafa Basgun

Locking ListView’s Header and Footer with CSS

with 7 comments

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.

Written by Mustafa Basgun

January 1, 2008 at 5:00 PM

7 Responses

Subscribe to comments with RSS.

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

    Rasheed

    January 4, 2008 at 4:39 PM

  2. 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.

    Mustafa Basgun

    January 4, 2008 at 5:53 PM

  3. 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

    William Feng

    January 6, 2008 at 1:43 AM

  4. William,

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

    http://web.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.

    Mustafa Basgun

    January 6, 2008 at 12:42 PM

  5. How can I get the scroll offsets for the table?

    Yogi

    June 23, 2008 at 4:30 AM

  6. Expressions are only supported by IE and not by any others. It will not work with FF.

    Evangelus

    November 6, 2008 at 3:34 PM

  7. Works great but it doesn’t work well when I add a master page.

    Swapnika

    April 7, 2009 at 5:04 PM


Leave a Reply