Html 如何在GWT 1.5中设置水平拆分器面板的样式

Html 如何在GWT 1.5中设置水平拆分器面板的样式,html,css,gwt,stylesheet,Html,Css,Gwt,Stylesheet,我有这个要求,以样式的右侧的水平分割面板。据我所知,GWT1.7支持单独的面板(左面板和右面板)样式,但我们在这里使用GWT1.5 gwt代码: HTML div1 = new HTML("Div 1"); div1.setWidth("200px"); div1.setHeight("200px"); HTML div2 = new HTML("Div 2"); div2.setWidth("400px"); div2.setHeight("500px"); HorizontalSplitP

我有这个要求,以样式的右侧的水平分割面板。据我所知,GWT1.7支持单独的面板(左面板和右面板)样式,但我们在这里使用GWT1.5

gwt代码:

HTML div1 = new HTML("Div 1");
div1.setWidth("200px");
div1.setHeight("200px");
HTML div2 = new HTML("Div 2");
div2.setWidth("400px");
div2.setHeight("500px");

HorizontalSplitPanel horizontalSPanel = new HorizontalSplitPanel();
horizontalSPanel.setLeftWidget(div1);
horizontalSPanel.setRightWidget(div2);

RootPanel.get().add(horizontalSPanel);
相应的输出:

<div class="gwt-HorizontalSplitPanel" style="position: relative; height: 100%;">
    <div style="border: medium none ; margin: 0pt; padding: 0pt; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;">
        <div style="border: medium none ; margin: 0pt; padding: 0pt; overflow: auto; position: absolute; top: 0px; bottom: 0px; width: 511px;">
            <div class="gwt-HTML" style="width: 200px; height: 200px;">Div 1</div>
        </div>
        <div style="position: absolute; top: 0px; bottom: 0px; left: 511px;">
            <table height="100%" cellspacing="0" cellpadding="0" class="hsplitter">
            <tbody>
                <tr><td valign="middle" align="center">
                    <img border="0" style="background: transparent url(http://localhost:8888/com.xyzpackage.MyEntryPoint/4BF90CCB5E6B04D22EF1776E8EBF09F8.cache.png) no-repeat scroll 0px 0px; width: 7px; height: 7px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" src="http://localhost:8888/com.xyzpackage.MyEntryPoint/clear.cache.gif"/>
                </td></tr>
            </tbody>
            </table>
        </div>
        <div style="border: medium none ; margin: 0pt; padding: 0pt; overflow: auto; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 518px;">
            <div class="gwt-HTML" style="width: 400px; height: 500px;">Div 2</div>
        </div>
    </div>
</div>

第一组
第2组
是否有任何方法可以仅将样式应用于RHS div

基本上,我得到了一个不允许我的应用程序在RHS视图中具有垂直滚动条的要求。

必须求助于DOM:

                Node node = horizontalSPanel.getElement().getFirstChildElement().getChildNodes().getItem(2);
                // set the overflow y to hidden, this is in point of view of GWT current version
                // does not allow user to set style to right or left containers. 
                DOM.setStyleAttribute((Element) node, "overflowY", "hidden");
这是非常蹩脚的,并且使用硬编码


任何一个有更好的解决方案的人都可以将Div 2包装到另一个Div中,并给这个Div赋予overflowY:hidden属性,因此不需要遍历DOM树


在ScrollPanel中使用相同的方法只是出于相反的原因。

GWT2.0已过时。我建议更新:)这不是我的要求,我们的应用程序很大。实际上我的要求是Wierd,RHS中有一个元素应该是“始终在顶部”,即,其余元素应该是可滚动的。但是,我们的要求也不允许使用双滚动条。问题是滚动条,请参见本页中的“框内或框外滚动条?”一个浏览器计算,另一个不计算,因此设置100%宽度和高度具有不同的行为,firefox显示双滚动条。