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 CPallini 365
1 OriginalGriff 275
2 Sergey Alexandrovich Kryukov 247
3 George Jonsson 130
4 ChauhanAjay 104
0 OriginalGriff 6,464
1 Sergey Alexandrovich Kryukov 5,915
2 CPallini 5,175
3 George Jonsson 3,559
4 Gihan Liyanage 2,522


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

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100