水平滚动条出现一会儿然后消失

Question

我正在使用UiBinder和DockLayoutPanel，如下所示。我将一个自定义CellTable添加到名为“contentPanel”的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。