В моем приложении GWT у меня есть панель кнопок, реализованная как HorizontalPanel
содержащая виджеты Button
обернутые в элементы <g:cell>
.
<g:HorizontalPanel styleName="{style.horizontalPanel}">
<g:cell>
<g:Button ui:field="selectButton" title="{constants.buttonLabel}"
text="{constants.actionLabelSelect}" />
</g:cell>
...
</g:HorizontalPanel>
Кнопки имеют следующий css:
.gwt-Button {
font-size: 13px;
color: #337BB1;
margin: 0px 10px;
padding: 5px 7px;
border: 1px solid #E3E3E3;
}
Этикетки кнопок часто имеют два слова. По сравнению со всеми браузерами, отличными от IE, панель кнопок не вписывается в макет. Каждая кнопка выглядит слишком широкой, определенная кнопка отображается только частично. Более того, даже если я изменяю размер представления (Ctrl + "-"
), это все равно, так как изменяется вся панель, содержащая кнопки. Поведение всех FF и Chrome: ярлыки кнопок разрываются по строкам, если панель не вписывается в окно браузера, а кнопки по умолчанию значительно меньше, поэтому она плавно подходит для стандартного размера браузера.
Почему IE ведет себя по-другому?
Еще одна проблема с отладкой заключается в том, что в GWT superDevMode и devMode проблема не возникает и в IE.
Как это возможно?
Версия браузера: IE8, версия GWT 2.5.1
Попробуйте использовать свойство min-width CSS.
.gwt-Button {
...
min-width: 135px;
}
вы можете попробовать с использованием переполнения CSS.
overflow: visible;