M5A B4N

Personal Blog of Mustafa Basgun

Locking ListView’s Header and Footer with CSS

with 10 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.

About these ads

Written by Mustafa Basgun

January 1, 2008 at 5:00 PM

10 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

  8. Hi,

    Thanks for sharing this scrollable ListView.

    I am trying to use it in my project, but there appears to be a bug in FireFox. When there are less than 6 items in the list, the row height expands to table height. Do you have a fix for this?

    - David

    David

    May 19, 2010 at 5:10 PM

  9. Amazing! So useful.

    Guilherme

    August 12, 2011 at 4:51 PM

  10. Thanks!

    Faizan Ahmad

    November 28, 2011 at 12:10 PM


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: