Click here to Skip to main content
11,720,785 members (82,019 online)
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 1

position:relative ;

It is for IE

position:fixed ;

It is for Firefox,chrome,etc...
  Permalink  
v2
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

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

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 2,179
1 OriginalGriff 924
2 F-ES Sitecore 640
3 Maciej Los 609
4 Richard MacCutchan 540


Advertise | Privacy | Mobile
Web03 | 2.8.150901.1 | Last Updated 24 Sep 2012
Copyright © CodeProject, 1999-2015
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