Accordeon height gets reset to 100px on main screen again and again

I have created a new main screen that contains an accordeon (and within that one another accordeon). Now every time I open the main screen layout in studio for some modification, the height of both accordeons is set to 100px where I want it to be ‘auto’. Obviously I reset it, save it and rebuild and every thing is fine until I reload the main screen layout again - then its set to 100px…

What am I doing wrong? Or is it an issue?

This is the main screen XML:


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://schemas.haulmont.com/cuba/window.xsd"
        caption="mainMsg://application.caption"
        class="com.axxemble.base27.web.mainwindow.ExtAppMainWindow"
        messagesPack="com.axxemble.base27.web.mainwindow"
        xmlns:ext="http://schemas.haulmont.com/cuba/window-ext.xsd"
        xmlns:main="http://schemas.haulmont.com/cuba/mainwindow.xsd">
    <dialogMode height="600"
                width="800"/>
    <layout expand="mainWindow">
        <hbox id="header"
              align="MIDDLE_CENTER"
              expand="spacer"
              ext:index="0"
              height="46px"
              stylename="header"
              width="100%">
            <label id="logo"
                   align="MIDDLE_CENTER"
                   height="46px"
                   htmlEnabled="true"
                   stylename="base27Logo"
                   value="Base27"
                   width="250px"/>
            <main:ftsField id="ftsField"
                           align="MIDDLE_LEFT"
                           stylename="searchField"
                           width="200px"/>
            <label id="spacer"
                   align="MIDDLE_CENTER"/>
            <main:userIndicator align="MIDDLE_LEFT"
                                stylename="headerUser"/>
            <main:logoutButton align="MIDDLE_RIGHT"
                               icon="font-icon:SIGN_OUT"
                               width="30px"/>
        </hbox>
        <hbox id="menuRow"
              stylename="menuRow"
              visible="false">
            <main:menu/>
        </hbox>
        <hbox id="mainWindow"
              expand="workArea"
              ext:index="1"
              width="100%">
            <vbox id="toolsPanel"
                  height="100%"
                  stylename="toolsMenu"
                  width="250px">
                <accordion id="menuAcc"
                           stylename="menuMainAcc"
                           width="100%">
                    <tab id="menuNews"
                         caption="Nieuws"
                         icon="font-icon:NEWSPAPER_O">
                        <button id="menuLatest"
                                caption="msg://Nieuws"
                                height="43px"
                                icon="font-icon:NEWSPAPER_O"
                                invoke="loadNews"
                                stylename="menuLevel1Btn"
                                width="100%"/>
                        <button id="menuArchive"
                                caption="msg://Archief"
                                height="43px"
                                icon="font-icon:ARCHIVE"
                                invoke="loadArchive"
                                stylename="menuLevel1Btn"
                                width="100%"/>
                    </tab>
                    <tab id="menuPolicy"
                         caption="Beleid en organisatie"
                         icon="font-icon:BUILDING">
                        <accordion id="menuPolicyAcc"
                                   stylename="menuLevel1Acc"
                                   width="100%">
                            <tab id="menuIntOrganisation"
                                 caption="Interne organisatie"
                                 icon="font-icon:SITEMAP">
                                <button id="menuScope"
                                        caption="Wie we zijn"
                                        height="43px"
                                        icon="font-icon:SITEMAP"
                                        invoke="loadScope"
                                        stylename="menuLevel2Btn"
                                        width="100%"/>
                                <button id="menuStrategy"
                                        caption="Missie, visie en strategie"
                                        height="43px"
                                        icon="font-icon:SITEMAP"
                                        invoke="loadStrategy"
                                        stylename="menuLevel2Btn"
                                        width="100%"/>
                                <button id="menuStakeholders"
                                        caption="Belanghebbenden"
                                        height="43px"
                                        icon="font-icon:SITEMAP"
                                        invoke="loadStakeholders"
                                        stylename="menuLevel2Btn"
                                        width="100%"/>
                                <button id="menuITPolicy"
                                        caption="Beleid"
                                        height="43px"
                                        icon="font-icon:SITEMAP"
                                        invoke="loadITPolicy"
                                        stylename="menuLevel2Btn"
                                        width="100%"/>
                                <button id="menuStaff"
                                        caption="Personeel en competenties"
                                        height="43px"
                                        icon="font-icon:USERS"
                                        invoke="loadStaff"
                                        stylename="menuLevel2Btn"
                                        width="100%"/>
                            </tab>
                            <tab id="menuCommunication"
                                 caption="Communicatie"
                                 icon="font-icon:SITEMAP">
                                <button id="menuMeetings"
                                        caption="Overleg"
                                        height="43px"
                                        icon="font-icon:SITEMAP"
                                        invoke="loadMeetings"
                                        stylename="menuLevel2Btn"
                                        width="100%"/>
                                <button id="menuDocuments"
                                        caption="Documenten"
                                        height="43px"
                                        icon="font-icon:USERS"
                                        invoke="loadDocuments"
                                        stylename="menuLevel2Btn"
                                        width="100%"/>
                            </tab>
                        </accordion>
                    </tab>
                </accordion>
            </vbox>
            <main:workArea id="workArea"
                           height="100%">
                <main:initialLayout spacing="true"
                                    stylename="initialBackground"/>
            </main:workArea>
        </hbox>
    </layout>
</window>

Any help appreciated.

Hello, Berend

Thank you for reporting the problem. We have created a YouTrack issue on the Studio problem, see the link on the right.

In your case, to avoid this reset, make sure your parent container’s height does not conflict with its children containers’ height. For example, to use height=“AUTO” for the accordion component, you should set absolute height for its content, otherwise, default container values will be set.
See more about screen layout rules here.

Regards.

:ticket: See the following issue in our bug tracker:

https://youtrack.cuba-platform.com/issue/PL-8196