Md-input-container: overwrite padding in mat-input-wrapper
I am creating a general search bar in the header of a webpage. It is set up and working fine, but I have a little problem trying to style it.
It currently looks like this:
I want it to look a little more polished, like this:
I'm great with the shape and position of the input box, but I would like to align the icon and placeholder text in the center, instead of hugging the top of the window and touching the borders.
Here is the html I am working with:
<md-input-container _ngcontent-c5="" color="accent" floatplaceholder="never" ng-reflect-color="accent" ng-reflect-float-placeholder="never" class="mat-input-container ng-untouched ng-pristine ng-valid">
<div class="mat-input-wrapper">
<div class="mat-input-table">
<!--bindings={"ng-reflect-ng-if": "0" }-->
<div class="mat-input-infix">
<input _ngcontent-c5="" id="search-person" mdinput="" placeholder="Search for a person" type="text" ng-reflect-is-disabled="false" ng-reflect-model="" ng-reflect-disabled="false" ng-reflect-id="search-missionaries" ng-reflect-placeholder="Search for a person" ng-reflect-type="text" class="ng-untouched ng-pristine mat-input-element ng-valid">
<i _ngcontent-c5="" class="material-icons">search</i>
<span class="mat-input-placeholder-wrapper">
<!--bindings={"ng-reflect-ng-if": "true"}-->
<label class="mat-input-placeholder mat-empty mat-accent" for="search-person"> Search for a person
<!--bindings={"ng-reflect-ng-if": "false"}-->
</label>
</span>
</div>
<!--bindings={"ng-reflect-ng-if": "0"}-->
</div>
<div class="mat-input-underline">
<span class="mat-input-ripple mat-accent">
</span>
</div>
<div class="mat-input-subscript-wrapper" ng-reflect-ng-switch="hint">
<!--bindings={"ng-reflect-ng-switch-case": "error"}-->
<!--bindings={"ng-reflect-ng-switch-case": "hint"}-->
<div class="mat-input-hint-wrapper" style="opacity: 1; transform: translateY(0%);">
<!--bindings={"ng-reflect-ng-if": ""}-->
<div class="mat-input-hint-spacer">
</div>
</div>
</div>
</div>
</md-input-container>
This is my CSS (using LESS):
md-input-container {
margin-right: 10px;
border-radius: 5px;
background: @brand-off-white;
#search-person {
width: 230px;
}
}
.mat-input-wrapper {
padding: 5px 3px !important;
}
.material-icons {
color: @brand-light-grey;
}
However, when I inspect the element, it does not apply the: 5px 3px padding included in the md-input-wrapper from my smaller file. I can apply it in the development console in my browser and everything looks like I want, but my actual code won't apply it.
How can I overwrite the padding class rules in the .mat-input-wrapper class?
source to share
Got almost the same problem.
Solution1:
md-input-container >>> .mat-input-wrapper { padding: 5px; 3px; }
or solution2:
/deep/ .mat-input-wrapper { padding: 5px; 3px; }
Explanation:
Basically, when designing a component, you want related styles to apply only to that component. For this angular adds a special attribute to your component elements and additional selectors in the css.
So, if your component has <div>
both styling div { color: red }
, then angular will convert it to <div _ng-content-c1>
and div[_ng-content-c1] {color: red}
, so it will only be affected div
inside your component. .mat-input-wrapper
is declared outside of your component, so angular will not apply any styles defined in your component css.
You can turn off this behavior by prefixing /deep/
the selector (solution 1), or you can use a custom selector >>>
that basically does the same thing.
For more information - Component Styles
source to share
According to Angular docs all 3 are deprecated (deprecated) / deep /, →> and :: ng- deep
According to Angular git issue , using :: ng-deep is the preferred solution at the moment of days
source to share