Locking ListView’s Header and Footer with CSS
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.
I wasn’t get same listview. Header and footer locking but scroll is different.
Rasheed
January 4, 2008 at 4:39 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.
Mustafa Basgun
January 4, 2008 at 5:53 PM
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
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
How can I get the scroll offsets for the table?
Yogi
June 23, 2008 at 4:30 AM
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
Works great but it doesn’t work well when I add a master page.
Swapnika
April 7, 2009 at 5:04 PM