I've just completed substituting a DockLayoutPanel for a DockPanel in
one of my application's widgets. This has *not* been easy, primarily
because of what appear to me to be bugs with the alignment of widgets
along the north, south, east, and west of the DockLayoutPanel. I have
managed work-arounds. Let me explain:
In my old code, I could say
DockPanel panel = new DockPanel();
panel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
panel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
Now when I use "panel.add(upArrowBtn, DockPanel.NORTH)" etc. each
button centers.
In the new code, alignment in the cardinal subpanels works differently
between IE7 and Mozilla 3.6.6. I have found what I believe are bugs
with each.
First, with the north and south directions, this technique works to
center my buttons (which are 16x16 PushButtons):
DockLayoutPanel panel = new DockLayoutPanel(Style.Unit.PX);
panel.addNorth(upArrowBtn, 18.0);
panel.getWidgetContainerElement(upArrowBtn).setAttribute("width",
"100%");
panel.getWidgetContainerElement(upArrowBtn).setAttribute("align",
"center");
However, this does NOT work with east and west. When I use
panel.addWest(leftArrowBtn, 18.0);
panel.getWidgetContainerElement(leftArrowBtn).setAttribute("height",
"100%");
panel.getWidgetContainerElement(leftArrowBtn).setAttribute("verticalAlign",
"middle");
the leftArrowBtn is not centered vertically. Looking with Firebug, I
see why: In the north and south panels, only style height is other
than zero (style="position: absolute; overflow: hidden; left: 0px;
right: 0px; bottom: 0px; height: 18px;"), whereas in the east and west
panels, only right is zero ("position: absolute; overflow: hidden;
top: 18px; right: 0px; bottom: 18px; width: 18px;"). Moreover,
"verticalAlign" has NOT been translated from camelcase to hyphenated
"vertical-align". (This also seems the case with IE7 and Safari 4,
but in IE my Developer Toolbar is broke--it won't display.)
I've managed to get east and west to align using a LayoutPanel:
LayoutPanel lpW = new LayoutPanel();
lpW.add(leftArrowBtn);
lpW.setWidgetTopHeight(leftArrowBtn, 50.0, Style.Unit.PCT, 100.0,
Style.Unit.PCT);
panel.addWest(lpW, 18.0);
LayoutPanels also work for north and south in Firefox and Safari, but
are broke in IE7. When I use
LayoutPanel lpN = new LayoutPanel();
lpN.add(upArrowBtn);
lpN.setWidgetLeftWidth(upArrowBtn, 50.0, Style.Unit.PCT, 100.0,
Style.Unit.PCT);
panel.addNorth(lpN, 18.0);
I get centered buttons in Firefox and Safari, but in IE7, the buttons
are shoved to the far right, as if the left edge of 50% is being
ignored.
So, getWidgetContainerElement for north and south, LayoutPanels for
east and west. This does not seem right.
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
