That's awesome except the alignment for the handle is based on a 30px constant creating a gap on the right if handle width < 30px (see below with handle height/width=24px). I would also like to make the track height smaller than the handle height, is that possible? Thanks!!!
.k-switch-on .k-switch-handle {
left: calc(100% - );
}
Nikolay
Telerik team
commented on 15 Dec 2021, 12:21 PM
Hi Sean,
You can remove the width calculation and the handle will automatically adjust itself:
Hi Sean,
You can use the following CSS to adjust the Switch height and the labels' font size:
<style> .k-switch { font-size: 6px; } .k-switch-handle { width: 30px; height: 22px; } </style>
Here is a Dojo demo demonstration this: https://dojo.telerik.com/uBELAkiS
Hi Nikolay,
That's awesome except the alignment for the handle is based on a 30px constant creating a gap on the right if handle width < 30px (see below with handle height/width=24px). I would also like to make the track height smaller than the handle height, is that possible? Thanks!!!
}
Hi Sean,
You can remove the width calculation and the handle will automatically adjust itself:
<style> .k-switch { font-size: 6px; } .k-switch-handle { height: 22px; } </style>
Also, what do you menad by 'make the track height smaller than the handle height'? Let me knwo so I can advise further.