Issue in Flexbox, HBox and VBox design layouts within a Simple Form

[Former Member]

Hi All,

I am trying a basic layout design of adding few fields in a horizontal manner, i.e., Total Quantity and UoM in one row; and Total Amount and Currency in another row.

I tried using Flexbox and different combinations of VBox & HBox. Although, the fields appear in a horizontal row, but I am unable to add them in a new line after the Due-Date Field.

Please suggest.

Regards

Raina

[Margot]

Can you share the full XML code and not as a screenshot but as a code block?

[Former Member]

Hi Margot, Please find the code snippet.

@margot.wollny

<VBox>

<f:SimpleForm id="SimpleFormDisplayschudel" adjustLabelSpan="true" editable="false" layout="ResponsiveGridLayout"

singleContainerFullSize="false">

<f:content>

<Label id="idlabelTotalScore" text="{i18n>TOTALSCORE}"/>

<Input id="idInputTotalScore" maxLength="5" value="{oJSONModelNotificationtaskdata>/results/0/Zzprescore}"

liveChange="ontotalscorevalidation" change="ontotalscorechange" width="20%"></Input>

<Label id="idlabeleffectivescore" text="{i18n>EFFECTIVENESSLEVEL}"/>

<Select change="onselectellectivenesslevel" id="idcomboboxeffectivescore" width="20%"

selectedKey="{oJSONModelNotificationtaskdata>/results/0/EffLevel}">

<core:Item key="key0" text="Select level"/>

<core:Item key="E0011" text="0% to 25%"/>

<core:Item key="E0012" text="25% to 50%"/>

<core:Item key="E0013" text="50% to 75%"/>

<core:Item key="E0014" text="75% to 100%"/>

</Select>

<Label id="idlabelsummary" text="{i18n>SUMMARY}"/>

<TextArea maxLength="40" id="idtextareasummary" value="{oJSONModelNotificationtaskdata>/results/0/Matxt}" liveChange="onlivechangesummary"

enabled="true" editable="true" width="60%"></TextArea>

<Label text="{i18n>REMARKS}"/>

<TextArea rows="6" id="idtextarearemarks" width="80%" cols="50" value="{oJSONModelNotificationtaskdata>/results/0/Longtext}" enabled="false"

editable="false"></TextArea>

<Label text="{i18n>FEEDBACK}"></Label>

<TextArea id="idtextareafeedback" liveChange="onfeedbacklivechange" width="80%" value="{oJSONModelNotificationtaskdata>/results/0/Feedback}"

rows="4"></TextArea>

<Label text="{i18n>PLANNEDSTARTDATE}"/>

<DatePicker id="DP1" placeholder="Enter Date ..."

value="{path : 'oJSONModelselectedmytask>/Pster' , type: 'sap.ui.model.type.Date', formatOptions: {pattern: 'dd.MM.yyyy',source:{pattern: 'yyyy-MM-ddTHH:mm:ss'}}}"

change="handleChangestart" width="30%" class="sapUiSmallMarginBottom" editable="false" enabled="false"/>

<Label text="{i18n>DUEDATE}"/>

<DatePicker id="DP2" placeholder="Enter Date ..."

value="{path : 'oJSONModelselectedmytask>/Peter' , type: 'sap.ui.model.type.Date', formatOptions: {pattern: 'dd.MM.yyyy',source:{pattern: 'yyyy-MM-ddTHH:mm:ss'}}}"

change="handleChangeend" width="30%" class="sapUiSmallMarginBottom" editable="true" enabled="true"/>

<FlexBox height="100px" alignItems="Start" justifyContent="Start">

<Label text="{i18n>CUSTOMFIELD1}" id="Custom1"/>

<Input id="idCustom1" value="{oJSONModelNotificationtaskdata>/results/0/Ztest}" width="20%"></Input>

<Label text="{i18n>CUSTOMFIELD2}" id="Custom2"/>

<Input id="idCustom2" value="{oJSONModelNotificationtaskdata>/results/0/Ztest}" width="20%"></Input>

</FlexBox>

<FlexBox height="100px" alignItems="Start" justifyContent="Start">

<Label text="{i18n>CUSTOMFIELD3}" id="Custom3"/>

<Input id="idCustom3" value="{oJSONModelNotificationtaskdata>/results/0/Ztest}" width="20%"></Input>

<Label text="{i18n>CUSTOMFIELD4}" id="Custom4"/>

<Input id="idCustom4" value="{oJSONModelNotificationtaskdata>/results/0/Ztest}" width="20%"></Input>

</FlexBox>

</f:content>

</f:SimpleForm>

</VBox>

[soheil_st]

You can use VBox container.