Hbox with buttons from up in full screen

Hi,
I try it some example from last youtube live " Making Web UI in Java Fancy: Unveiling the Power of Jmix UI" but when I go to full screen the buttons from the bottom page up also, so I not win little space at all.
What I do it wrong?

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<view xmlns="http://jmix.io/schema/flowui/view"
      title="msg://viabOldSeedsDetailView.title"
      focusComponent="formDeposit">
    <data>
        <instance id="viabOldSeedsDc"
                  class="com.genebank.genedatabank.entity.ViabOldSeeds">
            <fetchPlan extends="_base">
                <property name="id_deposit_code" fetchPlan="_base"/>
            </fetchPlan>
            <collection id="viabOldSeedsLinesDc" property="viaboldseedsLines">
            </collection>
            <loader id="viabOldSeedsDl">
                <query>
                </query>
            </loader>
        </instance>
        <collection id="depositsDc" class="com.genebank.genedatabank.entity.Deposit">
            <loader id="depositsDl" readOnly="true">
                <query>
                    <![CDATA[select d from Deposit d]]>
                </query>
            </loader>
            <fetchPlan extends="_base"/>
        </collection>
        <collection id="viabOldHistoryDc" class="com.genebank.genedatabank.entity.ViabOldSeeds">
            <loader id="viabOldHistoryDl" readOnly="true">
                <query>
                    <![CDATA[select v from ViabOldSeeds v where v.id_deposit_code.id = :deposit_code]]>
                </query>
            </loader>
        </collection>
    </data>
    <facets>
        <dataLoadCoordinator auto="true"/>
    </facets>
    <actions>
        <action id="saveAction" type="detail_saveClose"/>
        <action id="closeAction" type="detail_close"/>
    </actions>
    <layout expand="viabOldSeedsHistoryDataGrid" alignItems="STRETCH" padding="false" spacing="false">
        <vbox id="contentsBox" expand="depositFields" css="overflow: auto">
        <vbox id="depositFields" classNames="contrast-panel">
            <h5 text="msg://formDeposit"/>
        <formLayout id="formDeposit" dataContainer="viabOldSeedsDc">
            <entityComboBox id="depositsComboBox" dataContainer="viabOldSeedsDc" property="id_deposit_code"
                            required="true">
                <itemsQuery class="com.genebank.genedatabank.entity.Deposit" escapeValueForLike="true"
                            searchStringFormat="(?i)%${inputString}%">
                    <fetchPlan extends="_base"/>
                    <query>
                        <![CDATA[select d from Deposit d
                        where d.deposit_code like :searchString escape '\'
                        or d.id_accenumb.accenumb like :searchString escape '\'
                        order by d.id_accenumb.createdDate]]>
                    </query>
                </itemsQuery>
                <actions>
                    <action id="entityLookup" type="entity_lookup"/>
                    <action id="entityOpen" type="entity_open"/>
                </actions>
                <tooltip text="msg:///tooltip.depositsComboBox"
                         manual="true" position="TOP_START"/>
            </entityComboBox>
            <integerField id="stockField" property="stock" readOnly="true">
                <tooltip text="msg:///tooltip.stockField"
                         manual="true" position="TOP_START"/>
            </integerField>
            <integerField id="lastYearTestField" property="lastYearTest" readOnly="true">
                <tooltip text="msg:///tooltip.lastYearTestField"
                         manual="true" position="TOP_START"/>
            </integerField>
            <integerField id="lastViabTestField" property="lastViabTest" readOnly="true">
                <tooltip text="msg:///tooltip.lastViabTestField"
                         manual="true" position="TOP_START"/>
            </integerField>
        </formLayout>
        </vbox>
            <vbox id="viabilityFields" classNames="contrast-panel">
                <h5 text="msg://formViability"/>
                <formLayout id="formViability" dataContainer="viabOldSeedsDc">
                    <textField id="idVOSField" property="idVOS" readOnly="true">
                        <tooltip text="msg:///tooltip.idVOSField"
                                 manual="true" position="TOP_START"/>
                    </textField>
                    <integerField id="yearTestField" property="yearTest" readOnly="true">
                        <tooltip text="msg:///tooltip.yearTestField"
                                 manual="true" position="TOP_START"/>
                    </integerField>
                    <integerField id="viabPercentField" property="viabPercent" readOnly="true">
                        <tooltip text="msg:///tooltip.viabPercentField"
                                 manual="true" position="TOP_START"/>
                    </integerField>
                    <select id="statusField" property="status" readOnly="true">
                        <tooltip text="msg:///tooltip.statusField"
                                 manual="true" position="TOP_START"/>
                    </select>
                </formLayout>
            </vbox>
        <hbox id="dataGridOldSeedsHistory" classNames="contrast-panel" colspan="2" width="100%">
            <vbox>
            <h5 text="msg://formOldSeedsHistory"/>
            <dataGrid id="viabOldSeedsHistoryDataGrid" dataContainer="viabOldHistoryDc"  height="10em" width="50%" colspan="1">
                <columns>
                    <column property="yearTest" resizable="true" autoWidth="true"/>
                    <column property="viabPercent" resizable="true" autoWidth="true"/>
                </columns>
            </dataGrid>
            </vbox>
        </hbox>
        <vbox id="dataGridSeedsLines" classNames="contrast-panel" width="100%" maxHeight="10em">
        <h4 text="msg://com.genebank.genedatabank.entity/ViabNewSeeds.viaboldseedsLines"/>
        <hbox id="buttonsPanel" classNames="buttons-panel">
            <button id="createBtn" action="viabOldSeedsLineDataGrid.create"/>
            <button id="editBtn" action="viabOldSeedsLineDataGrid.edit"/>
            <button id="removeBtn" action="viabOldSeedsLineDataGrid.remove"/>
            <button id="excelExportBtn" action="viabOldSeedsLineDataGrid.excelExport"/>
            <button id="jsonExportBtn" action="viabOldSeedsLineDataGrid.jsonExport"/>
        </hbox>
        <dataGrid id="viabOldSeedsLineDataGrid" dataContainer="viabOldSeedsLinesDc" width="100%" minHeight="15em">
        <actions>
            <action id="create" type="list_create">
                <properties>
                    <property name="openMode" value="DIALOG"/>
                </properties>
            </action>
            <action id="edit" type="list_edit">
                <properties>
                    <property name="openMode" value="DIALOG"/>
                </properties>
            </action>
            <action id="remove" type="list_remove"/>
            <action id="excelExport" type="grdexp_excelExport"/>
            <action id="jsonExport" type="grdexp_jsonExport"/>
        </actions>
        <columns>
            <column property="germTestNum" resizable="true" autoWidth="true"/>
            <column property="seedsNum" resizable="true" autoWidth="true"/>
            <column property="germStartDate" resizable="true" autoWidth="true"/>
            <column property="viableSeeds" resizable="true" autoWidth="true"/>
            <column property="germEvalDate" resizable="true" autoWidth="true"/>
            <column property="germFaculty" resizable="true" autoWidth="true"/>
            <column property="germTime" resizable="true" autoWidth="true"/>
            <column property="treatTime" resizable="true" autoWidth="true"/>
            <column property="comments" resizable="true" autoWidth="true"/>
        </columns>
        </dataGrid>
        </vbox>
        </vbox>
        <hbox id="detailActions" classNames="px-m py-s bg-contrast-5">
            <button id="saveAndCloseBtn" action="saveAction"/>
            <button id="closeBtn" action="closeAction"/>
        </hbox>
    </layout>
</view>

I indicate with red line the problem:

screenshot

Hi,

The root layout expands the viabOldSeedsHistoryDataGrid, which is impossible, because it is not a direct child.

<layout expand="viabOldSeedsHistoryDataGrid">

You need to expand contentsBox instead.

Regards,
Gleb

1 Like

Thank you Gleb, work now!
If we are healthy and there is peace on Earth, I think we will see you in class, next month!