How to align checkboxes vertically in a non-editable form?

问题

SAPUI5 simple form does not make the checkboxes vertically center align.

Here is the code:

<form:SimpleForm title="{i18n>wizardDateLocation}"
  minWidth="1024"
  editable="false"
  layout="ResponsiveGridLayout"
>
  <Label text="{i18n>wholeDay}"/>
  <CheckBox selected="{/IsAllDay}" editable="false"/>
  <Label text="{i18n>date}" visible="{= ${/IsAllDay}}" required="true"/>
  <Text text="{/Start}" visible="{= ${/IsAllDay}}"/>
  <HBox></HBox>
  <Label text="{i18n>from}" visible="{= !${/IsAllDay} }" required="true"/>
  <Text text="{/Start}" visible="{= !${/IsAllDay} }"/>
  <Label text="{i18n>to}" visible="{= !${/IsAllDay} }" required="true"/>
  <Text text="{/End}" visible="{= !${/IsAllDay} }"/>
  <Label text="{i18n>isOnlineMeeting}" required="false"/>
  <CheckBox selected="{/IsOnlineMeeting}" editable="false"/>
  <Label text="{i18n>location}" required="{= !${/IsOnlineMeeting} }"/>
  <Text text="{/LocationName}"/>
  <Label text="{i18n>weblink}" required="{/IsOnlineMeeting}"/>
  <Text text="{/WebLink}"/>
  <Link press="editStepTwo" text="{i18n>edit}"/>
</form:SimpleForm>

How can I solve this issue?

回答1:

UI5 provides displayOnly property for controls that are usually editable but occur in a non-editable form.

Hence, instead of making the whole form editable, which is contradictory since the rest of the form fields are just texts (non-editable), try enabling displayOnly on CheckBoxes.

<form:SimpleForm editable="false">
  <!-- ... -->
  <CheckBox displayOnly="true" />
  <!-- ... -->
</form:SimpleForm>

From the API reference:

displayOnly

When set to true, the CheckBox is not interactive, not editable, not focusable and not in the tab chain. This setting is used for forms in review mode.
When the property enabled is set to false this property has no effect.

回答2:

I found the reason. Somehow strange but if we make the simple form not editable then this problem appears. The solution is:

<form:SimpleForm editable="true">

来源：https://stackoverflow.com/questions/59234186/how-to-align-checkboxes-vertically-in-a-non-editable-form

标签

checkbox

sapui5