IE GWT: DockPanel center component 100% height style is ignored

StackOverflow https://stackoverflow.com/questions/15900954

Question

I have as usual a problem with the Internet Explorer and CSS. I'm using with GWT a DockPanel to create a website with a header, a main part and a footer, all VerticalPanels where I add different Composites/Elements during runtime.

    RootPanel rootPnl = RootPanel.get("rootContainer");

    final DockPanel dockPanel = new DockPanel();
    dockPanel.setWidth("100%");
    dockPanel.setHeight("100%");

    rootPnl.add(dockPanel);

    final VerticalPanel headerPanel = new VerticalPanel();
    headerPanel.setSpacing(10);
    headerPanel.setStyleName("gwt-HeaderPanel");
    dockPanel.add(headerPanel, DockPanel.NORTH);
    dockPanel.setCellHeight(headerPanel, "100px");

    final VerticalPanel mainPanel = new VerticalPanel();
    mainPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
    mainPanel.setStyleName("gwt-MainPanel");
    dockPanel.add(mainPanel, DockPanel.CENTER);

    final VerticalPanel footerPanel = new VerticalPanel();
    dockPanel.add(footerPanel, DockPanel.SOUTH);
    dockPanel.setCellHeight(footerPanel, "150px");

As you can see, I added CSS styles. The main panel looks like this:

.gwt-MainPanel {
    width: 100%;
    height: 100%;
    padding: 20px;
    background-color: #353334;
    -moz-box-shadow: 0 2px 2px 0px #232323;
    -webkit-box-shadow: 0 2px 2px 0px #232323;
    box-shadow: 0 2px 2px 0px #232323;
}

So i put the height to 100% of the center cell, this is working with Firefox as intended, but the Internet Explorer is ignoring it completely. How can i make the IE filling the center part of the DockPanel also vertically? I searched for it already and tried for example to add different DOCTYPEs to the html page.

Please have a look here for the live example.

Thank you

Was it helpful?

Solution

You are setting 100% height of the VerticalPanel in the middle of the DockLayout, but you are not setting also the middle cell height to 100%. Try with:

dockPanel.setCellHeight(mainPanel, "100%");

Anyway using tables and percentages can lead to subtle problems that often you need to handle on your own. Always ask yourself "100% of what?".

Also, quoting the javadoc from DockPanel:

This widget has limitations in standards mode that did not exist in quirks mode. The child Widgets contained within a DockPanel cannot be sized using percentages. Setting a child widget's height to 100% will NOT cause the child to fill the available height.

If you need to work around these limitations, use DockLayoutPanel instead, but understand that it is not a drop in replacement for this class. It requires standards mode, and is most easily used under a RootLayoutPanel (as opposed to a RootPanel).

Using <!DOCTYPE html> sets the page in standard mode, meaning this will not going to work properly, and in quirks mode you have to experiment on your own.

Try also to consider using a Layout-based approach, as suggested by the javadoc. Since you are using a single div for the whole page (that rootContainer), it should be painless to use. See https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels#LayoutPanels.

OTHER TIPS

Don't mix up layout panels and non layout panels. If you are using Layout Panels then don't use vertical panel and absolute panel. Take a look at this question and its accepted answer for more details.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top