горизонтальная полоса прокрутки появляется на мгновение, а затем исчезает

Question

Я использую UiBinder и DockLayoutPanel, как показано ниже. Я добавляю пользовательскую CellTable в ScrollPanel с именем «contentPanel».

Когда 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.