[RCD] Ticket #1295420: Scrolling message list obscures column headers

Roland Liebl roland at roland-liebl.de
Thu Jun 23 10:42:43 CEST 2011


Hello,

I have created a script to fix messagelist table header.

http://www.roundcubeforum.net/5-release-support/14-release-discussion/8599-scrolling-messages-sort-column.html

The code can be inserted in template mail.html before closing body tag
or used by a plugin (hook render_page).

It works with recent versions of:

* IE
* FF
* Chrome
* Opera

There are issues with Safari. A fixed table header is slightly
misplaced for some reason. I was not able to find a solution yet 
(Safari
is locked out yet).

It has been not test tested with Konquerer/Netscape/Android; I don't
use these browsers.

Please review the code. I appreciate any feedback. Maybe someone is
able to solve the Safari issue.

Please focus on comments "ToDo" aswell. These comments mark hard coded
stuff which  should be replaced to make the script skinable.

Thanks for contributions in advance! Please notice, I'm not the most
skilled
Javascript/Jquery coder!

R.

--- Schnipp ----
{{{

<script>
$(document).ready(function(){
    function fixTHEAD(){
      // always remove the dummy row first
      $('#messagelist_empty_row').remove();
      var last_row = $('#messagelist > tbody > tr:last').position().top;
      // check if messagelist has vertical scrollbar
      if(last_row < ($('#messagelistcontainer').height() -
$('#messagelist > tbody > tr:first').height())){
        //No scrollbar, so we can unfix thead
        $('#messagelist thead tr').css('position','');
        return;
      }
      // add a dummy row because first row gets hidden when we fix thead
      $('<tr
id="messagelist_empty_row"><td> </td></tr>').insertBefore('#messagelist
  > tbody > tr:first');
      // add missing min-width style to threads column to getter a 
proper
table rendering
      // when thead is fixed
      $('#messagelist tbody tr td').each(function(){
        var elem = $(this);
        if(elem.attr('class') == 'threads'){
          elem.attr('style','min-width: 17px');
        }
      });
      // unfix thead to get default column widths
      $('#messagelist thead tr').css('position','');
      // read default column widths
      var width = new Array();
      var i = -1;
      var w = 0;
      var subject_col;
      var rightwidth = $('#mailrightcontainer').width();
      $('#messagelist thead tr td').each(function(){
        var elem = $(this);
        i++;
        // remember where subject column is located
        if(elem.attr('class') == 'subject'){
          subject_col = i;
        }
        width[i] = elem.width();
        w = w + width[i];
      });
      // adjust the subject column width if there is not enough space 
for
default column widths
      // ToDo: is it detectable?
      var scrollbar_width = 17;
      // ToDo: is the left space of 40px detectable?
      var space = rightwidth - w - (40 + scrollbar_width);
      if(space < 0 && subject_col){
        width[subject_col] = Math.max(width[subject_col] + space, 150);
      }
      // now fix thead and adjust column widths
      $('#messagelist thead tr').css('position','fixed');
      i = -1;
      $('#messagelist thead tr td').each(function(){
        var elem = $(this);
        i++;
        elem.width(width[i]);
      });
    }
    // lock out safari
    if(!bw.safari){
      // add border-spacing style for IE to avoid unwanted spaces in
fixed thead
      $('#messagelist').attr('style', 'border-spacing:0');
      // remove the fixed table layout style
      $('#messagelist').css('table-layout','auto');
      rcmail.addEventListener('listupdate', function(evt) {
        fixTHEAD();
        // adjust messagelist table if the container is resized
        $('#mailrightcontainer').resize(function(){
          fixTHEAD();
        });
        // adjust messagelist table if row is inserted and there were no
scrollbars before
        rcmail.addEventListener('insertrow', function(evt) {
          fixTHEAD();
        });
      });
    }
});
</script>

}}}
--- Schnapp ---

_______________________________________________
List info: http://lists.roundcube.net/dev/
BT/8d1870bd


_______________________________________________
List info: http://lists.roundcube.net/dev/
BT/aba52c80



More information about the Dev mailing list