Question

我正在使用UiBinder和DockLayoutPanel，如下所示。我将自定义CellTable添加到名为＆＃34; contentPanel＆＃34;的ScrollPanel。

首次创建CellTable时，会出现一个水平滚动条（以及cellTableLoading.gif）。一旦CellTable完成加载，水平滚动条就会消失。

如何防止水平滚动条出现在首位？

我很乐意提供有助于排查问题的任何其他信息。非常感谢！

<g:DockLayoutPanel unit='PX' styleName="{style.wrap}">
    <g:north size='180'>
        <g:HTMLPanel styleName='{style.header}'>
            <g:Hyperlink ui:field="logoutLink" styleName="{style.login}"/>
        </g:HTMLPanel>
    </g:north>
    <g:south size="70">
        <g:HTMLPanel styleName="{style.footer}">
            <g:Label>&copy; Copyright by</g:Label>
        </g:HTMLPanel>
    </g:south>
    <g:center>
        <g:HTMLPanel styleName='{style.content}'>
            <g:SimplePanel styleName='{style.left}' ui:field="navigationPanel" />
            <g:ScrollPanel styleName='{style.right}' ui:field='contentPanel' />
            <div style="clear: both;" ></div>
        </g:HTMLPanel>
    </g:center>

Answer 1

如果没有看到正在生成的标记和CSS样式，就无法判断为什么会发生这种情况，但要暂时关闭滚动条，您可以执行以下操作：

// Before you load your table
contentPanel.getElement().getStyle().setOverflow(Overflow.HIDDEN);
// load your table
// ....
// after table is loaded
contentPanel.getElement().getStyle().setOverflow(Overflow.AUTO);

作为旁注，您还应该将<g:center>内的面板实现为LayoutPanel而不是浮动的div。它将为您提供更加可预测的布局：

<g:center>
    <g:LayoutPanel styleName='{style.content}'>
        <g:layer left="0" width="200px">
            <g:SimplePanel styleName='{style.left}' ui:field="navigationPanel" />
        </g:layer>
        <g:layer right="0" left="200px">
            <g:ScrollPanel styleName='{style.right}' ui:field='contentPanel' />
        </g:layer>
    </g:LayoutPanel>
</g:center>

您还需要删除.left和.right中与width和float相关的任何与框模型相关的样式。

水平滚动条只出现片刻然后消失

1 个答案: