RadzenSwitch Blazor / How to align vertically?

Radzen.Blazor Components
1

Anybody knows how to align the button? I would like something like: TEXT: SWITCH but instead the button is way below, I tried several things but it seems not able to move, or just moves below the text... is there a solution? please check my screenshot, thank you for your help!

image

2

Yeah I have had this problem too. Just change the Display property of the switch to Block and if anything is not quite positioned vertically use the margin top to move it down see example:
Toggle

3

Thank you for the tip... yes, it works, except it moves to the bottom like this:

image

is there a way to put the label on the side? Thank you for all your help.

Another thing could be using your solution, create columns, on one side the label and the other the item but that that will look ugly as it does not look like the rest of the form controls.

4

You could also:

  1. Place both the Label and the Switch in a single Column element
  2. Remove the Column Left Padding to vertically align with the other form controls
  3. Change the Display property of the Column to flex
  4. Apply Label Padding Top to align vertically and Right to adjust the space between the Label and the Switch

image

2 Likes
5

Thank you @yordanov you are awesome!