Hi,
Because I wish to be usable also on small screens (phones, tablets, etc) I used formLayout and not Hbox because this remain as it with columns and not align vertical.
Initial I used hbox and my screen view appear nice:
and after that I changed hbox with formLayout but if add chart unde formLayout the chart is not visible at all:
with chart outside formLayout work but I not need all width from the screen for this:
my xml file:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<view xmlns="http://jmix.io/schema/flowui/view" xmlns:charts="http://jmix.io/schema/charts/ui"
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
order by v.yearTest]]>
</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="contentsVbox" alignItems="STRETCH" padding="false" spacing="false">
<vbox id="contentsVbox" expand="allForm" css="overflow: auto" >
<formLayout id="allForm" width="100%">
<responsiveSteps>
<responsiveStep minWidth="0" columns="1"/>
<responsiveStep minWidth="30em" columns="2"/>
<responsiveStep minWidth="40em" columns="3"/>
</responsiveSteps>
<vbox id="depositFields" classNames="contrast-panel" width="20%">
<h5 text="msg://formDeposit"/>
<formLayout id="formDeposit" dataContainer="viabOldSeedsDc" width="100%">
<responsiveSteps>
<responsiveStep minWidth="0" columns="1"/>
<responsiveStep minWidth="50em" columns="2"/>
</responsiveSteps>
<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="dStockField" property="dStock" readOnly="true">
<tooltip text="msg:///tooltip.dStockField"
manual="true" position="TOP_START"/>
</integerField>
</formLayout>
</vbox>
<vbox id="viabilityFields" classNames="contrast-panel" width="40%">
<h5 text="msg://formViability"/>
<formLayout id="formViability" dataContainer="viabOldSeedsDc" width="100%">
<responsiveSteps>
<responsiveStep minWidth="0" columns="1"/>
<responsiveStep minWidth="30em" columns="2"/>
</responsiveSteps>
<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>
<vbox id="pasaportFields" classNames="contrast-panel" width="40%">
<h5 text="msg://formPasaport"/>
<formLayout id="formPasaport" dataContainer="viabOldSeedsDc">
<responsiveSteps>
<responsiveStep minWidth="0" columns="1"/>
<responsiveStep minWidth="30em" columns="2"/>
</responsiveSteps>
<textField id="pAccenumbField" property="pAccenumb" readOnly="true">
<tooltip text="msg:///tooltip.pAccenumbField" position="TOP_START" manual="true"/>
</textField>
<textField id="pAccnameField" property="pAccname" readOnly="true">
<tooltip text="msg:///tooltip.pAccenameField" manual="true" position="TOP_START"/>
</textField>
<textField id="pGenusField" property="pGenus" readOnly="true">
<tooltip text="msg:///tooltip.pGenusField"
manual="true" position="TOP_START"/>
</textField>
<textField id="pSpeciesField" property="pSpecies" readOnly="true">
<tooltip text="msg:///tooltip.pSpeciesField"
manual="true" position="TOP_START"/>
</textField>
</formLayout>
</vbox>
</formLayout>
<vbox id="chartOldSeedHistoricVbox" classNames="contrast-panel" width="100%">
<h5 text="msg://chartOldSeedsHistoric"/>
<charts:chart id="chartOldSeedHistoric" width="100%" height="100%" minHeight="20em"
colorPalette="TEAL" animation="true">
<charts:toolbox>
<charts:features>
<charts:saveAsImage title="msg://saveAsImage.title" type="PNG"/>
</charts:features>
</charts:toolbox>
<charts:tooltip trigger="AXIS">
<charts:axisPointer type="SHADOW"/>
</charts:tooltip>
<charts:legend backgroundColor="WHITE"/>
<charts:xAxes>
<charts:xAxis/>
</charts:xAxes>
<charts:yAxes>
<charts:yAxis>
<charts:axisLabel formatter="{value} %"/>
</charts:yAxis>
</charts:yAxes>
<charts:dataSet>
<charts:source dataContainer="viabOldHistoryDc"
categoryField="yearTest" valueFields="viabPercent"/>
</charts:dataSet>
<charts:series>
<charts:bar name="msg://chartOldSeedsHistoricSeries"/>
</charts:series>
</charts:chart>
</vbox>
<vbox id="gridOldSeedsHistoryVbox" classNames="contrast-panel" width="100%">
<h5 text="msg://formOldSeedsHistory"/>
<dataGrid id="viabOldSeedsHistoryDataGrid" dataContainer="viabOldHistoryDc" height="10em" width="100%">
<columns>
<column property="yearTest" resizable="true" autoWidth="true"/>
<column property="viabPercent" resizable="true" autoWidth="true"/>
<column property="idVOS" resizable="true" autoWidth="true"/>
</columns>
</dataGrid>
</vbox>
<vbox id="dataGridSeedsLines" classNames="contrast-panel" width="100%" maxHeight="50%">
<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%">
<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>
Also I seen responsiveStep split equals the space width from screens not take width from vbox 20%, 40%, 40%.
Is possible what I try it?