BrowserFrame height sizing is not consistent - problem when used within a VerticalScrollBox

Support
#1

Hello Everyone

I am having difficulty expanding a BrowserFrame component to its maximum possible height in certain configurations.

Environment
CUBA Platform version: 7.2.13
CUBA Studio plugin version: 15.3-202
IntelliJ version: CUBA Studio 2020.2
Datebase: PostgreSQL
Operating System: macOS 11.2.3 (20D91)
Kernel Version: Darwin 20.3.0
Browser: Safari 14.0.3 (16610.4.3.1.7)
Hardware: iMac (Retina 5K, 27-inch, 2020)
Graphics: AMD Radeon Pro 5700 8 GB
File System: Case-Sensitive Journaled HFS+ (APFS)

Use Case: I need to specify the height of a BrowserFrame component or a ScreenFragment that contains a BrowserFrame component within a VerticalScrollBox, so that it is expanded to its maximum possible height in the screen.

Problem: A BrowserFrame that is a child of a VerticalScrollBox or the child of another component that is the child of a VerticalScrollBox cannot be set to the desired size.

  1. If I have a VerticalScrollBox that contains a TabSheet with several Tabs and a tab contains a BrowserFrame, then it it not possible to set the height of the BrowserFrame: Auto, 100% and any pixel size, e.g. 600px, are all ignored.

  2. If I have a VerticalScrollBox that contains a form and a BrowserFrame and the editActions HBox, then it is not possible to set the height of the BrowserFrame using Auto or 100% but it is possible to set a pixel size, e.g. 600px. The pixel size will affect the height as expected but I do not want a static size.

In the attached demo anonymous-screens-access.zip (117.3 KB) you will find 6 different use cases of the BrowserFrame that you can play with; some are OK some are not OK (NOK):

  1. ExtMainScreen containing a ScreenFragment that contains a BrowserFrame. This works as expected. OK

  2. Tab Screen containing a VerticalScrollBox with a TabSheet as its child. In the BrowserFrameFragment tab it is not possible to set the height of the Fragment containing the BrowserFrame. NOK

  3. Tab Screen containing a VerticalScrollBox with a TabSheet as its child (analog to number 2). In the BrowserFrame tab it is not possible to set the height of the BrowserFrame. NOK

  4. Fragment Screen containing the BrowserFrameFragment. This works as expected. OK

  5. MembershipEdit screen (you must first choose the Memberships screen and create a new Membership). The height of the BrowserFrameFragment in the MembershipEdit screen can be expanded as expected. OK

  6. MembershipScrollEdit screen (you must first choose the “Memberships (Scroll)” screen and edited an existing Membership created in point 5 or just create a new Membership). The MembershipScrollEdit screen is a copy of the MembershipEdit screen but it contains a ScrollBox. The BrowserFrameFragment height in the MembershipScrollEdit screen can only be expanded by setting the pixel size; Auto and 100% do not work. NOK

Please note that I have also tried many other variations using a VBox and GroupBox, etc. but I was not able to set the height of the BrowserFrameFragment. I have also set the “expand” attribute of the Layout and for other components in many different combinations without any success.

I believe that this is a bug but maybe I have missed a setting/attribute somewhere. Can someone please give me some feedback, a solution or an alternative solution. Many thanks in advance.

Best regards
Chris

#2

Hello!

Vertical ScrollBox may work incorrectly when its content has relative height like “100%” because scroll will appear only when content height exceeds scroll box height. The BrowserFrame does not occupy the space when it has “AUTO” size, because of iframe behavior.

In this case, I think it is better do not place TabSheet into ScrollBox but scroll content of tabs. For instance:

<layout expand="tabSheet">
    <tabSheet id="tabSheet">
        <tab id="normalTab"
             caption="NormalTab"
             expand="scrollBox">
            <scrollBox id="scrollBox" with="100%">
                <vbox spacing="true" margin="true,false,false,false">
                    <label id="firstLabel" value="First Label"/>
                    <label id="secondLabel" value="Second Label"/>
                    <label id="thirdLabel" value="Third Label"/>
                    <label id="fourthLabel" value="Fourth Label"/>
                    <label id="fifthLabel" value="Fifth Label"/>
                    <label id="sixLabel" value="Sixth Label"/>
                    <label id="seventhLabel" value="Seventh Label"/>
                    <label id="eighthLabel" value="Eighth Label"/>
                    <label id="ninthLabel" value="Ninth Label"/>
                    <label id="tenthLabel" value="Tenth Label"/>
                    <label id="eleventhLabel" value="Eleventh Label"/>
                    <label id="twelfthLabel" value="Twelfth Label"/>
                    <label id="thirteenthLabel" value="Thirteenth Label"/>
                    <label id="fourteenthLabel" value="Fourteenth Label"/>
                    <label id="fifteenthLabel" value="Fifteenth Label"/>
                </vbox>
            </scrollBox>
        </tab>
        <tab id="browserFrameTab" caption="BrowserFrameFragment" expand="browserFrameFragment">
            <fragment id="browserFrameFragment" screen="demo_BrowserFrameFragment">
                <properties>
                    <property name="page" value="test-02"/>
                    <property name="mimeType" value="text/html"/>
                </properties>
            </fragment>
        </tab>
        <tab id="browserFrameTag" caption="BrowserFrame" margin="true,false,false,false" spacing="true"
             expand="browserFrame">
            <browserFrame id="browserFrame" width="100%" responsive="true"/>
        </tab>
    </tabSheet>
</layout>

Probably, height is overridden by displayPage() method in the screen controller

#3

Hello Roman, Thank you very much for the information and your efforts. I will experiment with your suggestions as soon as possible, probably next week, and will let you know what the results are. Best regards, Chris