Switch circle goes out of bounds

Radzen.Blazor Components
1

I have a container using Bootstrap's d-flex align-items-right.
And I have shortened the Switch and Switch-Checked, but UI goes "out-of-bounds."

.rz-switch {
height: 1.2rem;
width: 2rem;
}

.rz-switch-checked {
height: 1.2rem;
width: 2rem;
}

radzen

2

Yo can use your browser developer tools inspector to check what additional styles should be applied to the switch for your case.

3

enchev:

I have tried all the styles that I could find and none of them works.

.rz-switch {
height: 1rem;
width: 1.5rem;
}

.rz-switch-checked {
height: 1rem;
width: 1.5rem;
}

.rz-switch-circle {
height: 1rem;
width: 1.5rem;
}

.rz-switch-circle::before {
height: 1rem;
width: 1.5rem;
font:.5rem;
}

JWu

4

NM...I figured it out....the problem is it has to be .rz-switch .rz-switch-circle::before....sorry, haven't touched CSS for awhile.