How can I change the height of the Switch component

[Sean]

I would like to make the switch smaller (height especially) without changing the theme.  Is this possible?  Thanks.  

[Nikolay]

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

[Sean]

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!!!

.k-switch-on .k-switch-handle {

1. left: calc(100% - );

}

[Nikolay]

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.