Angular Material 2 mat-slide-toggle change slide distance of thumb











up vote
1
down vote

favorite












I'm using the mat-slide-toggle element from Angular Material 2, and I made it a bit bigger, but the thumb doesn't move to the end of the container when clicked, and I can't seem to figure out which transform-translate property controls the distance.



The following is a pic of how it looks currently when clicked: enter image description here



Is someone aware of what property needs to be changed for this to slide to the end? Thanks in advance.






css angular-material2







share|improve this question


























    up vote
    1
    down vote

    favorite












    I'm using the mat-slide-toggle element from Angular Material 2, and I made it a bit bigger, but the thumb doesn't move to the end of the container when clicked, and I can't seem to figure out which transform-translate property controls the distance.



    The following is a pic of how it looks currently when clicked: enter image description here



    Is someone aware of what property needs to be changed for this to slide to the end? Thanks in advance.






    css angular-material2







    share|improve this question
























      up vote
      1
      down vote

      favorite









      up vote
      1
      down vote

      favorite











      I'm using the mat-slide-toggle element from Angular Material 2, and I made it a bit bigger, but the thumb doesn't move to the end of the container when clicked, and I can't seem to figure out which transform-translate property controls the distance.



      The following is a pic of how it looks currently when clicked: enter image description here



      Is someone aware of what property needs to be changed for this to slide to the end? Thanks in advance.






      css angular-material2







      share|improve this question













      I'm using the mat-slide-toggle element from Angular Material 2, and I made it a bit bigger, but the thumb doesn't move to the end of the container when clicked, and I can't seem to figure out which transform-translate property controls the distance.



      The following is a pic of how it looks currently when clicked: enter image description here



      Is someone aware of what property needs to be changed for this to slide to the end? Thanks in advance.






      css angular-material2




      css angular-material2






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 10 at 1:37









      Neekoy

      798921




      798921
























          1 Answer
          1






          active

          oldest

          votes

















          up vote
          0
          down vote



          accepted










          In case someone Googles this - the correct selector is the following:



          .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container {
          
    transform: translate3d(64px,0,0) !important;
          
}


          I got the correct answer from the following link, which contains other useful selectors for mat-slide-toggle.






          share|improve this answer





















            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














             

            draft saved


            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53235288%2fangular-material-2-mat-slide-toggle-change-slide-distance-of-thumb%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            0
            down vote



            accepted










            In case someone Googles this - the correct selector is the following:



            .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container {
            
    transform: translate3d(64px,0,0) !important;
            
}


            I got the correct answer from the following link, which contains other useful selectors for mat-slide-toggle.






            share|improve this answer

























              up vote
              0
              down vote



              accepted










              In case someone Googles this - the correct selector is the following:



              .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container {
              
    transform: translate3d(64px,0,0) !important;
              
}


              I got the correct answer from the following link, which contains other useful selectors for mat-slide-toggle.






              share|improve this answer























                up vote
                0
                down vote



                accepted







                up vote
                0
                down vote



                accepted






                In case someone Googles this - the correct selector is the following:



                .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container {
                
    transform: translate3d(64px,0,0) !important;
                
}


                I got the correct answer from the following link, which contains other useful selectors for mat-slide-toggle.






                share|improve this answer












                In case someone Googles this - the correct selector is the following:



                .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container {
                
    transform: translate3d(64px,0,0) !important;
                
}


                I got the correct answer from the following link, which contains other useful selectors for mat-slide-toggle.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 10 at 2:29









                Neekoy

                798921




                798921






























                     

                    draft saved


                    draft discarded



















































                     


                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53235288%2fangular-material-2-mat-slide-toggle-change-slide-distance-of-thumb%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    -

                    Popular posts from this blog

                    How to pass form data using jquery Ajax to insert data in database?

                    Image
                    .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } 1 I have 4 tables namely stud, country_master_academic,master_state and master_city. The main problem is that my form consists of many different fields like textbox, radio buttons, dropdown and an image file, so i am getting really confused. I can't insert data in database. Please help me. I tried many times but its not working. Thanks for the help in advance. Modal in home.php page <div class="container"> <div class="modal fade" id="add_data_modal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> ...
                    Read more

                    National Museum of Racing and Hall of Fame

                    Image
                    Coordinates: 43°04′35″N 73°46′24″W  /  43.0763°N 73.7734°W  / 43.0763; -73.7734 Professional sports hall of fame in Saratoga Springs, New York National Museum of Racing and Hall of Fame National Museum of Racing and Hall of Fame Established 1951 Location Saratoga Springs, New York Type Professional sports hall of fame Director Cathy Marino Curator Victoria Tokarowski Website racingmuseum.org The National Museum of Racing and Hall of Fame was founded in 1951 in Saratoga Springs, New York, to honor the achievements of American Thoroughbred race horses, jockeys, and trainers. In 1955, the museum moved to its current location on Union Avenue near Saratoga race course, at which time inductions into the hall of fame began. Each spring, following the tabulation of the final votes, the announcement of new inductees is made, usually during Kentucky Derby Week in early May. The actual inductions are held in mid-August during the Saratoga race meeting...
                    Read more

                    Guess what letter conforming each word

                    Image
                    6 $begingroup$ This is an entry in the Fortnightly Topic Challenge #41: Short and Sweet. 1 letter only could be mean anything . With an additional letter in front , could be used as medicine component and something you definitely learn or at least heard once. Add another letter in front , you would possibly hear that many times . Add an additional letter in front , you would found an independent country . With an additional letter, in the end , you would found something related to apple . Add another letter in the end , you would found something bad . Hint: Each letter is unique . word knowledge letters chemistry share | improve this question ...
                    Read more