Lots of DIVs

Hilco Wijbenga

unread,

Jul 28, 2011, 1:42:15 PM7/28/11

to GWT Users

Hi all,

I've been wondering about this for a long time. I thought it was about
time I asked.

When I create even the simplest widget, I see

at runtime. The middle DIV with class GMYET22DPF is (finally) my stuff. :-)

Do I really need all those extra DIVs? And all that position absolute
styling stuff? Is there a way to get rid of it or is it actually
adding value somehow?

(I am not a CSS/HTML person so to me it just seems unnecessary.)

Cheers,
Hilco

Thomas Broyer

unread,

Jul 28, 2011, 3:30:56 PM7/28/11

to google-we...@googlegroups.com

First, as soon as you use a layout panel, it adds a div to the document's body, using it as a ruler to measure centimeters in pixels (this is the very first div here, moved out of view using top:-20cm).

Then, each layout panel is a div, containing another ruler to measure EMs and EXs (it has to be repeated for each panel because it depends on the font-size applied locally or inherited).

Then, each child of layout panel lives in its own div (I don't remember the rationale for this, but it had to be done so it works in all browsers and allows some kinds of styling –borders and margins–).

So here, you have the CM rule, followed by the RootLayoutPanel, containing its own ruler and a child. That child in turns is a layout panel, with its own ruler and a single child.

Alisson Prestes

unread,

Jul 29, 2011, 7:54:03 AM7/29/11

to google-we...@googlegroups.com

Very smart :)

Alisson Prestes

www.google.com/profiles/javalisson

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/cUsZ2VaB3m4J.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

Markus

unread,

Jan 18, 2012, 11:48:09 AM1/18/12

to Google-We...@googlegroups.com

Hi there,

I just stumbled upon this thread, and would like to ask a quick question
regarding this:

While I like agree that this is a pretty clever way to measure EMs, etc., it
gives me a problem with all browsers except Chrome: the browsers show a
horizontal scrollbar as soon as one of these 10cm-wide divs extends beyond the
edges of the window.

Is there a way to prevent this without sacrificing functionality (like a
display:none or something), or can it be disabled, since I don't really need any
units other than px in my page?

Thank you very much for you help,

Markus

Rob Coops

unread,

Jan 18, 2012, 12:44:31 PM1/18/12

to google-we...@googlegroups.com

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

Hi Markus,

Yes you can simply tell the window that you are putting the elements in that there should be no overflow (css this is overflow-x, overflow-y or overflow: visible, auto, hidden, scroll (same as auto) or inherit) for GWT you can either do this via css or you can address the property of the element or window you are placing your div's in and tell that exactly the same as above listed for css.

Personally I would advice to always disable all scroll bars and only later on when you determine you need them enable them again this just makes sure that they only appear where you want them and do not show up in places where they would look out of place even when a user resizes the screen to an extreem small width or height. But opinions there will vary and I am not prepared to get into a discussion about that so I will just mention this practice and leave the rest up to you ;-)