How can I change the height of the Switch component

0 Answers 34 Views
Switch
Sean
Top achievements
Rank 1
Sean asked on 08 Dec 2021, 02:29 AM
I would like to make the switch smaller (height especially) without changing the theme.  Is this possible?  Thanks.  
Nikolay
Telerik team
commented on 10 Dec 2021, 12:38 PM

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
Top achievements
Rank 1
commented on 11 Dec 2021, 05:20 AM

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

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


No answers yet. Maybe you can help?

Tags
Switch
Asked by
Sean
Top achievements
Rank 1
Share this question
or