Window Layout - Design Question

Support
#1

Hello team,

I’ve got an edit screen that is pretty specific in its design/layout needs. I’ve some input fields at the top of the screen, followed by a tabsheet below it. I’ve been charged with pinning everything in place - including the tabsheet menu and editactions buttons at the bottom of the screen, and only allowing scrolling for the contents within the tabs themselves.

Any attempt I’ve made of this still scrolls the whole screen and usually messes up my current layout. I would really appreciate some help in figuring this out.

test.zip (88.1 KB) Here is a test project with the same layout in the my-data-edit.xml file.

Thanks in advance,
Adam

#3

Hello!

Try to remove scrollBox from the root layout because it scrolls all its content with your form. Then move your tabSheet on the same layer with form and expand it:

<layout expand="tabSheet" spacing="true">
    <form id="form"
          dataContainer="myDataDc"
          width="100%">
          ...
    </form>

    <tabSheet id="tabSheet">
      ...
    </tabSheet>

    <hbox id="editActions" spacing="true">
        ...
    </hbox>
</layout>

To scroll tab content just add scrollBox:

    <tabSheet id="tabSheet">
        <tab id="tab1" caption="Tab1">
            <scrollBox height="100%"
                       width="100%">
                <hbox width="100%"
                      css="margin-top:15px;">
                    <vbox width="50%" spacing="true">
                     
                    </vbox>
                    <vbox width="50%" spacing="true">
       
                    </vbox>
                </hbox>
            </scrollBox>
        </tab>
    </tabSheet>

See reworked demo project: test.zip (88.3 KB)

#5

Thank you so much for the help. It works perfectly! I’m a little confused by the form container not being needed around all of the form fields, though.