Question

I am using UiBinder and a DockLayoutPanel as shown below. I am adding a custom CellTable to the ScrollPanel named “contentPanel”.

When the CellTable is created for the first time, a horizonal scrollbar appears (along with the cellTableLoading.gif). Once the CellTable is finishing loading the horizontal scrollbar disappears.

How can I prevent the horizontal scrollbar from appearing in the first place?

I’d be happy to provide any other info that will help troubleshoot the problem. Many thanks!

<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

Impossible to tell why it happens without seeing the markup that’s being generated and your CSS styles, but to turn off the scrollbars temporarily you can do the following:

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

As a side note, you should also implement the panel inside <g:center> as a LayoutPanel instead of floated divs. It will give you a much more predictable layout:

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

You would also, obviously need to remove any box model related styles from .left and .right, like width and float.