Search code examples
sapui5

SimpleForm: Always Label Before Element and Without Cutting off Text

As you can see in the image below, the labels are cut off and part of the text is replaced with ellipsis (...). I want to have a SimpleForm that is always (whatever the screen size or DOM with available) showing the Label left from the text (as shown in the screenshot), but I want the full label to be visible.

Screenshot

<f:SimpleForm
  editable="false"
  layout="GridLayout"
  title="Title"
  labelSpanXL="12"
  labelSpanL="12"
  labelSpanM="12"
  labelSpanS="12"
  adjustLabelSpan="true"
  emptySpanXL="8"
  emptySpanL="8"
  emptySpanM="8"
  emptySpanS="8"
  columnsXL="5"
  columnsL="5"
  columnsM="5"
  singleContainerFullSize="true">
  <f:content>
    <Label text="LABEL VERY LONG LABEL IS LONG"/>
    <Text text="TEXT"/>
  </f:content>
</f:SimpleForm>
Solution

  • As of UI5 version 1.50, you can enable wrapping in Label so that it doesn't get cut off.

    sap.m.Label wrapping

    Update: And as of version 1.54, the wrapping is automatically enabled in (Simple)Form