Freeze the grid view header

Rails
1

i wanna freeze the grid view header fixed just like in excel as we
scroll the rows scrolls away leaving the column heading fixed
I wanna perform this action using css

2

and you intent to make this work on all possible browsers?

On Wed, Feb 18, 2009 at 6:23 AM, William Ss

3

Mathieu R. wrote:

and you intent to make this work on all possible browsers?

On Wed, Feb 18, 2009 at 6:23 AM, William Ss

yes, it should work in ie and mozilla ff

4

Mathieu R. wrote:

I wish you good luck with that…
I made this working on IE6. Using CSS and Javascript. declaring 2
header, setting one hidden and the other one absolutely place above.
Works fine on IE6, but looks crappy on FF. I guess you could detect
the browser and treat it accordingly…

On Wed, Feb 18, 2009 at 9:57 AM, William Ss

could u send me that code so that i can use in my application…will

5

I wish you good luck with that…
I made this working on IE6. Using CSS and Javascript. declaring 2
header, setting one hidden and the other one absolutely place above.
Works fine on IE6, but looks crappy on FF. I guess you could detect
the browser and treat it accordingly…

On Wed, Feb 18, 2009 at 9:57 AM, William Ss

6

On Thu, Feb 19, 2009 at 1:36 AM, William Ss

Send me the css code

7

First, i’m no JS/CSS expert, I did this a long time ago. So don’t get
scared with the poor coding… :frowning:
I’m note sure this will help you, but can give you an idea.

JS:

var tables_header = $$(’.table_header’);
if(tables_header != null && tables_header.length > 0){
for (var index_tables = 0; index_tables < tables_header.length;
++index_tables) {
var table_header = tables_header[index_tables];
if(!table_header.hasClassName(‘largura_processada’) &&
table_header.next().select(’.table_body’) != null &&
table_header.next().select(’.table_body’)[0] != null){
var table_body = table_header.next().select(’.table_body’)[0];
var ths_body = table_body.select(‘th’);
var ths_table_header = table_header.select(‘th’);
$(table_header).style.width = $(table_header).getWidth()-17;
for( var index_ths = 0 ; index_ths < ths_table_header.length ;
index_ths++){
var th_table_header = $(ths_table_header[index_ths]);
if(!th_table_header.hasClassName(‘no_dynamic_width’)){
var classVisibleBefore = $(th_table_header).className;
$(th_table_header).className = ‘’;
$(th_table_header).style.width =
$(ths_body[index_ths]).getWidth()-21;
$(th_table_header).className = classVisibleBefore;

      }
    }
    $(table_header).style.width =

table_body.select(‘thead’)[0].getWidth();
table_header.absolutize();
table_header.addClassName(‘largura_processada’);
table_body.tHead.style.visibility=‘hidden’;
}
}
}

first table:

                  <th class="sortable dynamic_width

word-wrap">Característica



                </tr>
              </thead>
          </table>

Second table:

Descrição Disp Filtro 
                    <th width="50%">Caracter&iacute;stica</th>
                    <th width="50%">Descri&ccedil;&atilde;o</th>
                    <th >Disp</th>
                    <th >Filtro</th>
                  </tr>
                </thead>

On Thu, Feb 19, 2009 at 1:36 AM, William Ss