GWT - InternetExplorer UI issue with HorizontalPanel

0
votes

In my GWT application I have a button panel, implemented as HorizontalPanel containing Button widgets wrapped within <g:cell> elements.

<g:HorizontalPanel styleName="{style.horizontalPanel}">
    <g:cell>
    <g:Button ui:field="selectButton" title="{constants.buttonLabel}" 
                  text="{constants.actionLabelSelect}" />
    </g:cell>
    ...
</g:HorizontalPanel>

The buttons have the following css:

.gwt-Button {
    font-size: 13px;
    color: #337BB1;
    margin: 0px 10px;
    padding: 5px 7px;
    border: 1px solid #E3E3E3;      
    }

Button labels often have two words. Compared to all non-IE browsers, the button panel does not fit into the layout. Each button looks way too wide, a certain button is only shown partly. Moreover, even if I resize the view (Ctrl + "-"), this still is the case, as the whole panel containing the buttons is resized. The behavior of all FF and Chrome is: button labels are line-breaked if the panel does not fit into the browser window, and the buttons are much smaller by default, so that it cleary fits in standard browser size.

Why is IE behaving differently?

Another problem with debugging is that in GWT's superDevMode and devMode, the problem does not occur in IE, too.

How is this possible?

Browser version: IE8, GWT version 2.5.1

1
htmlcssinternet-explorergwtcross-browser

1 Answers

0
votes

Try with CSS min-width Property

.gwt-Button {
   ...
   min-width: 135px;
}

you can try with CSS overflow Property also

overflow: visible;