How did Gmail do it?

[haryanto]

Hi guys, if you login to your Gmail, try resize the width of the window. As you resize, notice how the SUBJECT cell shrink instead of flowing to the second line when you decrease the width of the window? How did Gmail do it?
I have never seen anything like that. Definitely not accomplished by plain HTML. Anyone care to break the code? I am not really good at Javascript/analyzing javascript so I arrived at nothing after 1 hr of inspection.
If anyone need to access Gmail, send me a PM and I will get you access to it.

[kaled]

Most likely done with CSS. I don't use Gmail but I suggest you switch off javascript and see if it behaves the same way.

Kaled.

[jbot]

it's not JS. the field is in a table cell and the field's width is set to 100%, hence it resizes naturally.

dead simple :rolleyes:

<td><b>Subject:</b></td><td colspan="2" width="100%"><input tabindex="1" name="subject" size="60" style="width: 100%;" id="3_compose" value="" onfocus="top.js._CM_OnFocusField(window,this)"></td>

[haryanto]

Well Im not talking about that.
I am talking about dynamically masking the content as you resize.
Look, if you are usingnormal HTML cell, the content will flow to the next row if you squeeze it(reduce width of window). But this one doesn't behave like that! It kept the line to one row no matter what. Hope you get what Im talking about.

[flashfan]

No magic. If you study its javascript [gmail.google.com] well, you will know how gmail makes it.

[haryanto]

Which is why I posted here.
On my first post, I have clarified that I aint no whiz when it comes to javascript.
That is why I was hoping that some guru can come in here and rescue the day by breaking up the code.

[flashfan]

This is how gmail does:

.nb {width:100%;background:white;table-layout:fixed}
..
<td class=nb>content</td>

[haryanto]

Thanks guys.

I managed to replicate the effect!
Woohoo!
It is CSS afterall!

<style type="text/css">
<!--
.nb {
width:100%;
background:white;
table-layout:fixed;
overflow: hidden;
}
-->
</style>
<table class=nb>
<tr class=nb>
<td nowrap class=nb>
content content content content content content content content content content content content content content content content content content content content
</td>
</tr>
</table>