GWT forced height HTMLPanel

Question

Hello,

I'm developing a GWT project, and I encountered a problematic cross-browsering problem.

When using firefox, there are problems with the display of all the pages. I found the reason why : In UIBinder, each of my pages are wrapped by a "g:HTMLPanel" : at start and at the end of the xml file, to wrap the content of all the pages

When doing this, the generated code of the panel goes like this :

div style="width: 100%; height: 100%; ....

The problem is that "height : 100%". If I remove it with firebug, the display is perfect. So my goal is to programatically remove that generated 100% height.. But no way to do it ! I tried everything : setHeight, setSize, working on the Element itself with getElement().methods()... I tried to do things like style.clear(), everything that could have a chance to work.. But in the generated code that "height: 100%" will ALWAYS be there. If I set it's height to "50%" or "50px" it has no effect at all.

I even tried to give it an ID, then with pure javascript to change it's style, but no solution either..

Note : I'm sure that I'm working on the right element : adding a styleName, for example, works well.

Any idea ?

Your help would be really appreciated, I have no clue of how to remove this bit of generated code, and I've been looking for hours already :(:(:(:(

Best regards,

Nils

Answer 1

I just inspected some of the code generated by GWT from my uibinders in firebug and < g:HTMLPanel > isn't adding any width or height styling.

I don't have < g:HTMLPanel > as the root element in my uibinder though, I have my own class.

<a:FormPanel ui:field="form">
    <g:HTMLPanel>
        <input type="hidden" ui:field="discoveryId" />
        <table cellpadding="2" cellspacing="0" class="{widgets.gridPanel}">
            <tr>
                <td>Name:*</td>

What about using say FlowPanel as your root uibinder class instead, then HTMLPanel?

Failing that you could always use the !important css rule to override the ones assigned on the div.

.myHTMLPanel {
   width: auto !important;
   height: auto !important;
}

Answer 2

This can be due to the fact that an HTMLPanel is wrapped into a DeckPanel. A DeckPanel adds "height: 100%" and "width: 100%" to the elements.

After showing the widget, add the following code:

deckPanel.add(widget);    
deckPanel.showWidget(0);
Element e = DOM.getParent(widget.getElement());
DOM.setStyleAttribute(e, "height", "");
DOM.setStyleAttribute(e, "width", "");
widget.setHeight("");
widget.gwtContainer.setWidth("");