Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET CSS
I am working on the senerio where i need to fix the gridview header in while scrolling in firefox & Chrome
 
My code is working well in IE but not working in firefox & Chrome.
 
Please have a look on the code.
 
Css to freeze the HeadeRow
 
.Freezing
      {
          position:relative ;
          background-color: #902b01;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 10px;
          font-weight: normal;
          padding: 5px;
          white-space: nowrap;
      }
 

<HeaderStyle CssClass="Freezing" />
 

i am just using CSS to freeze the HeaderRow which is working well in IE but not in other one and i need to do it in FireFox & Chrome
 
Please help me in this.
 
Thanks
Posted 10-May-12 4:05am
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

Have a look at the following article, it says that it works on IE, Firefox & Chrome:
Grid View with Fixed Header[^]
  Permalink  
Comments
VJ Reddy at 10-May-12 20:23pm
   
Good find. 5!
Sandeep Mewara at 10-May-12 22:38pm
   
Yeah. Thanks.
Pankaj Nikam at 24-Sep-12 9:21am
   
+5 :) awesome share.
Sandeep Mewara at 24-Sep-12 9:24am
   
Thanks.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

HI Ashish,
I think I have solution of this.
please see below javascript code
 
<script type="text/javascript" language="javascript">
var orgTop = 0;
$(document).scroll(function () {
 
var id = $("tr:.header").get(0);
//alert(id)
var offset = $(id).offset();
var elPosition = $(id).position();
var elWidth = $(id).width();
var elHeight = $(id).height();
if (orgTop == 0) {
orgTop = elPosition.top;
}
if ($(window).scrollTop() <= orgTop) {
 
id.style.position = 'relative';
id.style.top = 'auto';
id.style.width = 'auto';
id.style.height = 'auto';
}
else {
id.style.position = 'absolute';
id.style.top = $(window).scrollTop() + 'px';
id.style.width = elWidth + 'px';
id.style.height = elHeight + 'px';
}
});
</script>
 
where [.header] is the css class of your Grid header.
Just add this script on the page and replace [header] with the css class name you have used for your header.
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 4

  Permalink  
v2
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

position:relative ;
 
It is for IE
 
position:fixed ;
 
It is for Firefox,chrome,etc...
  Permalink  
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 405
1 Peter Leow 225
2 Sergey Alexandrovich Kryukov 210
3 Maciej Los 195
4 DamithSL 174


Advertise | Privacy | Mobile
Web03 | 2.8.140709.1 | Last Updated 24 Sep 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid