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

[CristianBabei]

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.

[former_member227918 · Accepted solution]

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 · Accepted solution]

It worked perfectly, thx alot!

[former_member340030]

Instead of custom css why cant you use margin default classes from SAP ... Those are safest options ..

And even you can see the flex box properties which will help you to align the content of hbox and vbox .. alignContent , alignItems, displayInline and justifyContent ..

https://sapui5.hana.ondemand.com/#/api/sap.m.FlexBox/controlProperties

[former_member227918]

Hi,

use editable property of form control to align labels in middle .

editable="true"

[CristianBabei]

I know, but that solution is only for Forms, but there, you can't put labels on the right side, only left, and if you try it, it ignores the label.