Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
anne f
30
Igx-switch width
posted

Hi, does anyone know the best way to change the width of the igx-switch component? And is there a way to make the length of the switch longer and the circular switch button smaller? 

  • 1500
    Suggested Answer
    Offline posted

    Hello,

    After investigating this matter further and doing some research, changing the width of the switch checkbox has been determined to be a feature request. You can submit feature request in our GitHub repository here.

    Remember when submitting your idea to explain the context in which a feature would be used and why it is needed as well as anything that would prevent you from accomplishing this today. You can even add screenshots to build a stronger case.

    This will give you the opportunity do directly communicate with our development team regarding the issue and get notifications whenever a new information is available.

    Alternatively, you can play a bit with the css classes, however here you will have to adjust values yourself. Here is a sample of the classes that need to be overwritten to achieve wider slide on the icon with smaller dot inside:

    :host {
        ::ng-deep {

            // this is for the dimensions of the background slider
           .igx-switch__composite{
            width: 3.25rem;
            height: 0.875rem;
           }
           // here you can adjust the circular switch and make it smaller if needed
           .igx-switch__composite-thumb {
            width: 15px;
            height: 15px;
            min-width: 10px;
            border-radius: 50%;
            display: inline-block;
            border-color: gray;
           }
           // this will control the lenght of the animation between states
           .igx-switch--checked .igx-switch__composite-thumb {
            transform: translateX(2.2rem);
           }
        }
    }

    Please let me know if you need any further assistance.

    Regards,

    Tihomir Tonev
    Associate Software Developer
    Infragistics