Forum: Ruby on Rails freeze the grid view header

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
William S. (Guest)
on 2009-02-18 11:23
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
Mathieu R. (Guest)
on 2009-02-18 13:28
(Received via mailing list)
and you intent to make this work on all possible browsers?

On Wed, Feb 18, 2009 at 6:23 AM, William Ss
William S. (Guest)
on 2009-02-18 14:57
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
Mathieu R. (Guest)
on 2009-02-18 15:22
(Received via mailing list)
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
William S. (Guest)
on 2009-02-19 06:36
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
Mathieu R. (Guest)
on 2009-02-19 13:33
(Received via mailing list)
First, i'm no JS/CSS expert, I did this a long time ago. So don't get
scared with the poor coding... :-(
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:
<table cellspacing="0" cellpadding="0" class="tabela-padrao
tablesorter table_header" >
                    <thead>
                    <tr>

                      <th class="sortable dynamic_width
word-wrap">Caracter&iacute;stica</th>
                      <th class="sortable dynamic_width
word-wrap">Descri&ccedil;&atilde;o</th>
                      <th>Disp</th>
                      <th >Filtro</th>

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


Second table:
<table cellspacing="0" cellpadding="0" class="tabela-padrao
tablesorter table_body" >
                    <thead style="visibility:;">
                      <tr>

                        <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
William S. (Guest)
on 2009-02-20 07:39
> On Thu, Feb 19, 2009 at 1:36 AM, William Ss

Send me the css code
This topic is locked and can not be replied to.