Hello,
I have created a script to fix messagelist table header.
http://www.roundcubeforum.net/5-release-support/14-release-discussion/8599-s...
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