docklayoutpanel in a dialogbox in ie8
will vuong
docklayoutpanel in a dialogbox to render correctly in ie8 (the center
region occupies the entire contents of the dialogbox). everything
renders correctly in firefox 3.5 however. the north and south regions
are being clipped in ie8.
my html host page does have <!doctype html>
public class TestDialog extends DialogBox {
interface Binder extends UiBinder<Widget, TestDialog> {};
private static final Binder binder = GWT.create(Binder.class);
public TestDialog() {
setWidget(binder.createAndBindUi(this));
setModal(true);
setAnimationEnabled(true);
setText("DialogBox with DockLayoutPanel");
}
}
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:style>
.panel {
padding: 1em;
}
.center {
border: 1px solid red;
}
.buttons {
text-align: right;
border: 1px solid blue;
}
</ui:style>
<g:DockLayoutPanel unit='EM' styleName='{style.panel}' width="700px"
height="400px">
<g:north size="2">
<g:HTML>north</g:HTML>
</g:north>
<g:center>
<g:HTMLPanel styleName="{style.center}">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</g:HTMLPanel>
</g:center>
<g:south size="2">
<g:HTMLPanel styleName="{style.buttons}">
close button
</g:HTMLPanel>
</g:south>
</g:DockLayoutPanel>
</ui:UiBinder>
will vuong
expected in ie8:
DockLayoutPanel root = new DockLayoutPanel(Unit.EM);
root.addNorth(new HTML("north"), 2);
root.addSouth(new HTML("south"), 2);
root.add(new HTML("center"));
root.setSize("700px", "300px");
dialog = new DialogBox();
dialog.add(root);
dialog.setModal(true);
dialog.setAnimationEnabled(true);
dialog.setText("DialogBox with DockLayoutPanel");
dialog.setGlassEnabled(true);
dialog.setAutoHideEnabled(true);
dialog.show();
dialog.center();
but if i comment out dialog.show() and dialog.center() at the end and
call those methods later on in the program (ie, i want to construct
the dialogbox but keep it hidden until the user clicks a button later
for instance), then the dialog box is rendered without the north/south
regions in ie8.
so oddly enough, if i construct the dialogbox and show it immediately,
it works fine in ie8. but if i don't call show() immediately, then it
doesn't work in ie8. it works correctly in firefox though!
anybody with any ideas? am i missing something trivial?