Scrolling message list obscures column headers

[willm23]

On the message list page, the scrollbar for the message
list scrolls the entire table, including the column
headers.

Suggest that the correct behaviour would be to leave
the column headers and scroll the message rows themselves?

[roundcube]

Logged In: YES 
user_id=1262041

This would be the best but I have no idea how to achieve
this with CSS. Any suggestions?

[moenm]

Logged In: YES 
user_id=1053168

Normally you can use position:fixed Which I tried in the
skin, but it caused the layout to break.

Having spent some time with your code, you may want to add a
roundcube tag for message list headers. Then you can move
them outside the div that holds the list.

[roundcube]

Logged In: YES 
user_id=1262041

You can't separate the header from the rows because it's one
table which is scalable. There's no way to ensure that the
headers till fit the rows when resizing the window if
they're not in ONE table.

[Lou]

There are ways to scroll table bodys without scrolling table headings. We're fortunate that the table is structured appropriately. Unfortunately I haven't seen a method that is fully cross-browser yet. I'm going to attempt a few methods of achieving this in a graceful way over the next few days.

[Lou]

We could adopt the Pushpin header technique at ​http://codylindley.com/CSS/249/pushspin-header-a-simplified-data-grid-with-a-stationary-header. It requires two divs surrounding the table but not much else and the CSS is pretty clean. It may have a side effect in Safari but needs to be examined closely against the latest Safari builds to be sure.

Are we still interested in this?

[jpingle]

I'd be interested in seeing this. Not that it's a huge inconvenience, but it would be nice to have, especially if one uses a large per-page message count.

[moc]

I fixed this ticket maybe not in elegant way but it should work. I tested ti with IE7 and FF. See the attached patch.

[thomasb]

Move to next milestone :-)

[thomasb]

Wait for client-rewrite with jQuery

[rosali]

If you are going to fix scrolling out of message list header, please do not miss to do the fix as well for the folder list header.

Thnx!

[alec]

Interesting CSS only solution: ​http://rcs-comp.com/blog/scrolling_table/

[thomasb]

Scrolling table patch against r3520

[thomasb]

Added a patch that implements the example from rcs-comp.com to the default skin. The big issue is to set the tbody height absolutely which needs to be done after each change to the list, including expanding/collapsing threads.

It is not yet functional on Safari and Chrome and leaves some quirks there.

[trisk]

I'm not really in favour of this change, both as it is quite hard to implement correctly and as it seems like the message list will have different from the behaviour of every other scrolling list with a header in the RoundCube UI.

[emi]

What about using a jQuery plugin specific for that?

​http://plugins.jquery.com/project/fixedtableheader

[thomasb]

I've now tried all jQuery plugins listed here ​http://plugins.jquery.com/taxonomy/term/1539 but none of them works with our super-flexible message list table. Especially replacing table rows causes problems in most of these solutions.

[emi]

With Firefox, this works:

• Set the height to tbody as to mailcontframe, less header height
• Set the overflow styles to tbody as to mailcontframe
• Push overflow styles from mailcontframe
• Add some width to the last column so tbody scrollbar does not hide it, or add another column with the width of the scrollbar (or some more).
• Ensure that the splitter changes tbody height instead of mailcontframe's one.

Another solution is to update the extra header created by plugins each time it may need to: each time the mailcontentframe changes (new/delete messages, folder change, folder pagination, listmenulink actions).

I have no other ideas on how to solve this issue. I think there are no more possibilities.

See you!!
emi

[whitequark]

Another css-only and very cross-browser solution: ​http://www.imaputz.com/cssStuff/bigFourVersion.html
Hope this will get it's way into 0.4-stable!

[alec]

Replying to whitequark:

​http://www.imaputz.com/cssStuff/bigFourVersion.html

This one has issues in IE7 and IE8.

[thomasb]

@emi: This is more ore less what I did on the attached listscrolling.diff patch.

@whitequark, @alec: This only works with fixed column widths and fixed tbody height. Not usabale with our flexible table layout.

[duelli]

Here are two examples for css-only solutions I originally reported in ticket #1486869:

• ​http://www.cssplay.co.uk/menu/tablescroll
• ​http://www.pmob.co.uk/temp/table-fixed-header.htm

[thomasb]

Replying to duelli:

Here are two examples for css-only solutions I originally reported in ticket #1486869:

• ​http://www.cssplay.co.uk/menu/tablescroll
• ​http://www.pmob.co.uk/temp/table-fixed-header.htm

These also rely on a fixed tbody height and the fact that the table rows exceed that height. Both is not necessarily given in Roundcube.

[rosali]

I have coded a plugin to fix the messagelist table header.

​http://mail4us.net/dev/plugins/fixTHEAD.zip

As fas as I can see, it works with recent versions of IE, FF, Chrome, Opera. Other browsers have not been tested. It does not work with Safari. When fixing the table header in Safari, I get a weird offset. I'm not experienced enough with Safari. So I have simply disabled the plugin for this browser.

Please have also a look at my method to detect the subject of messages when dragging/dropping. It could be used in list.js to simplify things there.

[thomasb]

Updated version can be found here: ​http://mail4us.net/dev/skins/default/templates/mail.zip
(from dev mailing list post)

[rosali]

Please use fixTHEAD plugin instead (​http://myroundcube.googlecode.com).

[duelli]

Just tested rosali's fixTHEAD plugin and it works fine.

[rosali]

I have updated fixTHEAD plugin (​http://myroundcube.googlecode.com). As far as I can see it is working well now (including the ellipsis display for long column contents).

The only remaining issue the incompatibility with Safari.

[thomasb]

After trying for another couple of hours, I still failed to apply any of the solutions out there to the Roundcube message list table structure. In order to make this work, both columns widths and table body height needs to be set to fixed values. The only sustainable solution I see for this is to extend our list.js widget to handle column sizes and properly adjust them on window or splitter resizing.

This is definitely a show stopper for 1.0 but unfortunately takes too much time and refactoring for 0.9.

[thomasb]

Here are some candidates to help out:

• ​http://fixedheadertable.com/demo.html
• ​http://www.chromaloop.com/posts/chromatable-jquery-plugin