1

I want to do a margin style for mat-slide-toggle-bar which is in a specific parent element mat-slide-toggle with class name parent-element.

Here my Html:

<mat-slide-toggle _ngcontent-ng-cli-universal-c397=""
    class="parent-element mat-slide-toggle parent-element mat-accent mat-checked mat-disabled ng-untouched ng-pristine"
    ng-reflect-form="[object Object]" id="mat-slide-toggle-1"><label class="mat-slide-toggle-label"
        for="mat-slide-toggle-1-input">
        <span class="mat-slide-toggle-bar">
            <input type="checkbox" role="switch" class="mat-slide-toggle-input cdk-visually-hidden"
                id="mat-slide-toggle-1-input" tabindex="-1" disabled="" aria-checked="true">
            <span class="mat-slide-toggle-thumb-container">
                <span class="mat-slide-toggle-thumb"></span>
                <span mat-ripple="" class="mat-ripple mat-slide-toggle-ripple mat-focus-indicator"
                    ng-reflect-trigger="[object HTMLLabelElement]" ng-reflect-disabled="true" ng-reflect-centered="true"
                    ng-reflect-radius="20" ng-reflect-animation="[object Object]">
                    <span class="mat-ripple-element mat-slide-toggle-persistent-ripple"></span>
                </span>
            </span>
        </span>
        <span class="mat-slide-toggle-content"><span style="display: none;">&nbsp;</span> text</span></label>
</mat-slide-toggle>

What I did in style file but dosn't work :

.parent-element .mat-slide-toggle-bar {
  margin-left: 80px;
}}}
Coder-Meca
  • 401
  • 1
  • 3
  • 13
  • Your code is incomplete. – André Dec 01 '22 at 12:30
  • @André How ? the mat-slide-toggle-bar is generated in Dom object but in my html I have only that – Coder-Meca Dec 01 '22 at 13:16
  • 1
    You have references to mat-slide-toggle-bar and mat-slide-toggle-label, this is not part of your code and there's no way to help you without knowing how they are build. – André Dec 01 '22 at 13:54
  • @André I modified html code in question – Coder-Meca Dec 01 '22 at 14:06
  • Your approach is correct, did you also tried `.mat-slide-toggle-bar {margin-left: 80px;}` (without specific parents)? You should check your code in the browser inspector to see what might be overwriting it or maybe not importing correctly. – André Dec 01 '22 at 14:12
  • @André I did it and in inspector I have margin-left: 80px; not applied with a ligne --------- style, I don't know what we call that in css, how to know what overwriting it ? – Coder-Meca Dec 01 '22 at 15:39
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/250062/discussion-between-andre-and-coder-meca). – André Dec 01 '22 at 21:23

2 Answers2

0

You can try this:

.mat-slide-toggle-bar {margin-left: 80px !important;}

!important will take precedence over most other rules.

The first answer to the linked question gives more details about it: What is the order of precedence for CSS?

André
  • 1,602
  • 2
  • 12
  • 26
0

I solved it by this code in the scss of my parent component :

.parent-element .mat-slide-toggle-bar {
  margin-left: 20px !important;
}
Coder-Meca
  • 401
  • 1
  • 3
  • 13