GXT Scrollbars hiding fields

Question

I have a verticalLayoutContainer with a fieldset inside it and a FlowLayoutContainer inside that. When I set scroll mode to ALWAYS on the FlowLayoutContainer , the scroll bar is now hiding some of the fields inside.

Screenshots before and after adding scroll attached .

 <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g="urn:import:com.google.gwt.user.client.ui"
  xmlns:c="urn:import:com.sencha.gxt.widget.core.client" xmlns:container="urn:import:com.sencha.gxt.widget.core.client.container"
  xmlns:form="urn:import:com.sencha.gxt.widget.core.client.form" xmlns:button="urn:import:com.sencha.gxt.widget.core.client.button"
  xmlns:icon="urn:import:com.ffobar.widget">

    <ui:with type="com.sencha.gxt.core.client.util.Margins" field="nomargins">
        <ui:attributes top="0" right="0" bottom="0" left="0" />
    </ui:with>
    <ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData" field="verticalLayoutChildData">
        <ui:attributes width="1" height="1" margins="{nomargins}"/>
    </ui:with>
    <ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData" field="verticalLayoutData">
        <ui:attributes width="0.32" height="1"/>
    </ui:with>

    <c:FramedPanel headerVisible="false">
        <container:VerticalLayoutContainer layoutData="{verticalLayoutData}">
            <container:child layoutData="{verticalLayoutChildData}">
                <form:FieldSet headingText="Cross References" collapsible="true" expanded="true" ui:field="fsXref" >
                    <container:FlowLayoutContainer scrollMode="ALWAYS" ui:field="gcXref" >
                        <icon:FixedGrid ui:field="grid"></icon:FixedGrid>
                    </container:FlowLayoutContainer>
                </form:FieldSet>
            </container:child>
        </container:VerticalLayoutContainer>
    </c:FramedPanel>
</ui:UiBinder>

There are text fields added to the grid, these text fields are now covered by the H. scroll.

Before After

Answer 1

You can either put a padding on the right side of your panel to account for the scroll bar or you can use the scrolling support in VLC which has a method adjustForScroll. However, this always adjusts the content to account for the scrollbar, even if there is no scroll bar.

I overcame this issue by checking if a scroll bar was present on the VLC:

boolean hasScroll = container.getScrollSupport().getMaximumVerticalScrollPosition() > 0;
container.setAdjustForScroll(hasScroll);