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

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


I have created a script to fix messagelist table header.


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 
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
Javascript/Jquery coder!


--- Schnipp ----

    function fixTHEAD(){
      // always remove the dummy row first
      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','');
      // add a dummy row because first row gets hidden when we fix thead
id="messagelist_empty_row"><td> </td></tr>').insertBefore('#messagelist
  > tbody > tr:first');
      // add missing min-width style to threads column to getter a 
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);
        // 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 
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);
    // lock out 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
      rcmail.addEventListener('listupdate', function(evt) {
        // adjust messagelist table if the container is resized
        // adjust messagelist table if row is inserted and there were no
scrollbars before
        rcmail.addEventListener('insertrow', function(evt) {

--- Schnapp ---

List info: http://lists.roundcube.net/dev/

List info: http://lists.roundcube.net/dev/

More information about the Dev mailing list