cancel
Showing results for 
Search instead for 
Did you mean: 

Label's on the Right side of a sap.m.Switch

CristianBabei
Contributor
0 Kudos

Hello.

I'm trying to create a configuration app, with only Switch components, like this :

(Here I use it inside a Form)

The problem is that I want the labels to be on the other side, after the Switch.

But I can't find a proper way to archive this.

Tried with HBox / VBox , FlexBox...but when I have the label on the other side, it displays bad:

Is there a way to see it correctly in the middle? Without the use of custom CSS?

SAP used Swtich compones on this way on the user settings page, on the notification settings:

Thx in advance.

View Entire Topic
former_member227918
Active Contributor

here is the code,

<FlexBox alignItems="Center" justifyContent="Start">
   <items>
     <Switch state="true" class="sapUiSmallMarginEnd"></Switch>          
     <Text text="Label on the right side"></Text>
   </items>
</FlexBox>

-if you still don't want to use standard class "sapUiSmallMarginEnd" then you can define the layout for particular control as below and set growFactor property as required,

<Switch state="true">
   <layoutData>
        <FlexItemData growFactor="1" />
   </layoutData> 
</Switch>

CristianBabei
Contributor
0 Kudos

It worked perfectly, thx alot!