CODEWITHSUNDEEP
gwt
Boris Brudnoy
Boris Brudnoy

Reputation: 2460

Phantom <div> increases document width and produces an undesired document margin on Firefox

Thanks to Firefox's 3D View I detected an empty <div> far outside the boundaries of my GWT 2.5.1 app's screens. Here's a screenshot:

enter image description here

You can see the main app screen below, a couple of outsider <div>s on top of it (which I attribute to the inner workings of layout panels) and above them all, the unexplained <div>. It is represented by the following doc element (copied from Firefox's own dev tools):

<div style="position: absolute; z-index: -32767; top: -20cm; width: 10cm; height: 10cm; visibility: hidden;" aria-hidden="true"> … </div>

The <div> precedes the RootLayoutPanel element (used ensureDebugId to find out). The problem is that it is this <div> that causes an undesired right margin in the app's mobile views (which have limited width). Removing this <div> using dev tools eliminates the problem.

Does anyone know the origin of this <div> and what could get rid of it?

P.S.: I tested the issue on mobile Firefox to test a theory that this might be due to one of my add-ons. Alas, also happens on the mobile Firefox 21 which has none of my add-ons installed.

Update

A GWT project member commented on the issue, not recommending the use of layout panels in mobile applications. I switched from using the RootLayoutPanel to using the RootPanel and the problem indeed went away.

Upvotes: 0

Views: 249

Answers (2)

user602896
user602896

Reputation: 41

As a work around use this in your CSS. I have not tested it with use of aria in widgets in the app.

div[aria-hidden="true"] {
    right: 0cm;
}

But it will remove the horizontal scroll bar on mobile apps on iPhone and such.

Upvotes: 3

Thomas Broyer
Thomas Broyer

Reputation: 64561

All these divs are attributable to layout panels; they are "rulers" to detect changes in "relative units" (em and ex to detect font change –there's one such div per layout widget–; and cm to detect zooming –there's only one such div for the whole application–), because you can mix units when you position your "layers" in a LayoutPanel.

I think the fixedRuler (for cms) should be positioned not only at top:-20cm but also left:-20cm (or possibly right:-20cm in RTL). Would you mind filing a bug at https://code.google.com/p/google-web-toolkit/issues/entry ? (and possibly even providing the patch: http://www.gwtproject.org/makinggwtbetter.html)

Upvotes: 1

Related Questions