GWT 强制高度 HTMLPanel答案

【问题标题】：GWT forced height HTMLPanelGWT 强制高度 HTMLPanel
【发布时间】：2023-05-25 20:19:01
【问题描述】：

我正在开发一个 GWT 项目，但遇到了一个有问题的跨浏览器问题。

使用firefox时，所有页面的显示都有问题。我找到了原因：在 UIBinder 中，我的每个页面都由一个 "g:HTMLPanel" 包装：在 xml 文件的开头和结尾处，包装所有页面的内容

执行此操作时，面板的生成代码如下：

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

问题在于“高度：100%”。如果我用萤火虫删除它，显示是完美的。所以我的目标是以编程方式删除生成的 100% 高度。但没有办法做到这一点！我尝试了一切：setHeight、setSize、使用 getElement().methods() 处理元素本身... “高度：100％”将始终存在的代码。如果我将它的高度设置为“50%”或“50px”，它根本没有效果。

我什至尝试给它一个ID，然后用纯javascript来改变它的样式，但也没有解决方案..

注意：我确信我正在处理正确的元素：例如，添加一个 styleName 效果很好。

有什么想法吗？

非常感谢您的帮助，我不知道如何删除这部分生成的代码，而且我已经找了好几个小时了:(:(:(:(

最好的问候，

尼尔斯

【问题讨论】：

标签： gwt cross-browser height uibinder generated

【解决方案1】：

我刚刚在 firebug 中检查了 GWT 从我的 uibinder 生成的一些代码，并且没有添加任何宽度或高度样式。

虽然我的 uibinder 中没有作为根元素，但我有自己的类。

<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>

不如使用 FlowPanel 作为你的根 uibinder 类，然后是 HTMLPanel？

你总是可以使用 !important css 规则来覆盖分配给 div 的规则。

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

【讨论】：

【解决方案2】：

这可能是因为 HTMLPanel 被包装到了 DeckPanel 中。 DeckPanel 向元素添加“height: 100%”和“width: 100%”。

显示小部件后，添加以下代码：

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("");

【讨论】：