Symphony.

If a table in the publish area of the backend is extremely wide, header and footer are cut of unexpectedly:

Steps to reproduce:

• Add a lot of columns to a publish table.
• Resize the window until you see a horizontal scroll bar.
• Scroll to the right.
• Bingo.

I'm not sure yet why this happens but I see this behaviour in either Safari or Firefox on Mac OS 10.6.

Attachments:

sym_widetable.png

Unofortunately I have no clues as to why this happens... (Frankly, I don't even consider it as a bug!)

Any chance of an ensemble for this @Nils so that we have a real scenario to work with?

I've just been playing around with this and it seems like it's a browser bug, and not something specifically in Symphony's CSS. It occurs only when the table expands horizontally and forces horizontal scrolling. When it does, the browser treats the viewport width (as if the table was not there) as the actual width, but allows horizontal scrolling so you can still see the rest of the table.

The "fix" is to add overflow: hidden to the table's container, in this case #contents or #wrapper, however this has the effect of hiding the rest of the table if it gets too wide. I recall this used to be the case, and overflow: hidden was removed because tables were being truncated.

With this in mind, I consider this new behaviour to be better than a truncated table.

With this in mind, I consider this new behaviour to be better than a truncated table.

I agree. While being not aesthetically pleasing, this behaviour allows you to look at the whole table and therefore is functional to the user. overflow: hidden should be only used as a last resort and has many drawbacks (like the one Nick explained above).

Woohoo! I think I found a solution.

table-layout: fixed;
word-wrap: break-word;

table-layout: fixed has the effect of forcing the table to assume the width specified by CSS, rather than expanding to the required width of its columns. word-wrap forces any long words in cells (such as URLs that don't contain spaces) to break.

Attachments:

sym.table.png

Table headers go a bit crazy when they're long (see the other issue). Can be made a bit neater with vertical-align: bottom.

Nice fix! A quick googling has shown that table-layout and word-wrap are widely supported so I vote for Nick's solution. :)

... but I think you and I are posting in the wrong thread :P

Can you submit a pull request for this nick :D