Thursday, August 23rd, 2007
Learning from Gmail
Category: CSS
We can always learn from popular Ajax applications such as Gmail. In fact, browser vendors often fill their test suite with some of the big sites out there, and groan when they have to implement a bug to be backwards compatible :)
Jesse Kuhnert has a tip that he learned from looking at Gmail and reproducing a table layout that allowed a column’s content to have its overflow hidden without any white space breaking / etc when the browser is re-sized, as is what happens with the subject column of the gmail list view:
There isn’t very much magic to it, but the key seems to be using a table-layout: fixed css definition for the table as a whole and then only specifying column width values for the columns that shouldn’t have their content overflow hidden and tucked away behind the rest of the content.
CSS:
The best example is probably going to be just seeing a small demo of the technique - which you can view here.
There are all kinds of fun things hidden, normally with crazy tables ;)
As using tables sounds not a bad idea for this kind of data, I saw that grid like layouts just using divs instead. I can remember that when I’ve tried implementing a grid layout with tables, I had problems with controlling the column widths/paddings properly. Maybe i was just lame, I don’t know.
Anyway, you can do the same with plain divs, too:
[div style="background: #ddd; float: left; width: 100px; overflow: hidden; white-space: nowrap;"]
Take it eeeeeeaaaaaaassyyyyyyyyy!
[/div]
One thing I noticed with Opera/old Safari is that the 100% width in the td caused some serious rendering issues. Dunno if you noticed that too.
Why is it defined as “.grid * td”? Would not the “.grid td” be just as good?
@András Bártházi: problem with DIVs is that you can’t make grid like one in GMail (with one free-sized column) without really bad and big CSS hacks. So tables rulez
Wait, we’re getting a tip about fixed table layout? What’s next, clearing floats with clear: both? While it’s a good tip, it’s not exactly news.
I didn’t understand how to use the overflow effectively. I want to make my tables appear just like gmail did. on one line only. Could you show an example of this magic
here = http://blog.opencomponentry.com/grid.html
And with IE, you can toss in the {text-overflow:ellipsis;} for an added visual treat
One more thing that is missing from that code: {white-space:nowrap;}
I don’t think it works otherwise
@Scott {text-overflow:ellipsis;} ? I’ve never used that one before. thanks =)
p.s. I do have some white-space: nowrap mixed in there in different places - it’s possible I f-ed up the demo page snippet I put together though.
“And with IE, you can toss in the {text-overflow:ellipsis;} for an added visual treat”
Have no idea what you’re talking about Janos (3 comments up), but as a math guy, it just sounds funny… Microsoft didn’t add a text-overflow:ellipsis; did they??? Ha
-if they really did, I retract my statement and ask what it is
I had the worst time today with table widths and scriptaculous Effect.* (* being any effect). With tables, for some reason, hiding things and then showing them again makes Safari (and only Safari) forget what their width was. Is this similar to “resizing a browser window”, since dimensions of a table are being changed?
Joseph: you were right, I was not able to do something like this. Anyway, it’s possible to use JavaScript to set the width of the column. I wouldn’t say if that’s better than this solution, so it was great to read about it.
Chad: I don’t really understand your laugh, I guess you hadn’t got that “ellipsis” means “…” and nothing like a geometric shape here.
But it also need to specify the cols as well