Scroll Box not working inside fragment

Support
#1

I’m trying with no luck to create a scroll view inside a fragment.
The screen is formed by a tabsheet with each tab containing a fragment.

Despite having scroll boxes on each fragment, scroll bars do not show when the content overflows.

The design is like following:

Main screen containing the tabsheet

<layout>
    <tabSheet id="tabs">
        <tab id="tab_1" caption="Tab 1">
            <fragment id="tab_1_Fragment" responsive="true" screen="my_Tab_1_Fragment"/>
        </tab>
        <!-- other tabs -->
    </tabSheet>
</layout>

The fragment (my_Tab_1_Fragment) has a scroll box

<layout expand="theScrollBox" spacing="true">
    <hbox expand="titleField" spacing="true" width="100%">
        <label id="titleField" value="" stylename="h2 bold"/>
        <button action="refresh" stylename="icon-only large"/>
    </hbox>
    <scrollBox id="theScrollBox" width="100%" spacing="true">
        <flowBox id="boxesBox" spacing="true" width="100%" height="AUTO"/>
    </scrollBox>
</layout>

As I said this does not work. The content inside the fragment just drops outside the screen and remians unreachable.

The way I found to make it work is wrapping the fragment inside a scrollbox in the main screen.

Main screen

<layout>
    <tabSheet id="tabs">
        <tab id="tab_1" caption="Tab 1">
            <scrollBox id="scrollArea" width="100%" height="100%" margin="true" spacing="true">
                <fragment id="tab_1_Fragment" responsive="true" screen="my_Tab_1_Fragment"/>
            </scrollBox>
        </tab>
        <!-- other tabs -->
    </tabSheet>
</layout>

The fragment

<layout expand="boxesBox" spacing="true">
    <hbox expand="titleField" spacing="true" width="100%">
        <label id="titleField" value="" stylename="h2 bold"/>
        <button action="refresh" stylename="icon-only large"/>
    </hbox>
    <flowBox id="boxesBox" spacing="true" width="100%" height="AUTO"/>
</layout>

But the fact of adding the scroll box in the parent seems a little counter intuitive.
Is this the way it should work or am I missing something.

Thanks in advance.

#2

Hi,

The tabSheet has auto height as a result, there is no scroll on the resulting layout. The following should help:

<tabSheet id="tabs" height="100%">

Regards,
Gleb

#3

Thanks Gleb, for the response. I tried this, but it behaves the same.

Any idea?

#4

Could you please attach a demo project then?

#5

Hi Gleb. Thanks for your support. The problem was that the layout in fragment had auto height. Setting height=“100%” fixed the problem.

Regards.