so I have an override to angular material style in my global scss style like this:
.mat-form-field-infix{
padding: 0.5em 0 0.5em 0 !important;
}
then I want to apply a different padding to the same element in my component since I need a bit of more space to view more data; here is what I do in my component scss style:
:host ::ng-deep .mat-form-field-infix{
padding: 0.2em 0 0.2em 0 !important;
}
but the last style gets propagated to all components once its load. so the question is how can I prevent this behavior?
Note that ::ng-deep is destined to be deprecated: see Special selectors.
You can, however, follow a strategy like Yuriy describes: If you want extra padding for all descendants of my-roomy-component, you can target CSS from your global styles like
my-roomy-component .mat-form-field-infix {
padding: 0.2em 0 0.2em 0 !important;
}
And, again as Yuriy suggests, add more specificity to the selector to help the padding take effect without the !important. Alternatively, the outer component can have its view encapsulation set to None so its styles become global, but scope with CSS selectors again.
Related
I have a form with mat-errors that I'm trying to space out. I know I can simply space out the form fields themselves, but I've been trying to add margin/padding/border to mat-error elements, and they all get applied, but they don't move.
As far as the CSS goes, I've tried most things I can think of to force it to move. The styles are applied but nothing is actually changing.
mat-error{
display: block !important;
position: relative !important;
margin-bottom: 40px !important;
padding-bottom: 40px !important;
z-index: 999;
}
Why is this happening?
Change your css to class: .mat-error instead of mat-error.
In order to change styles in angular materials you should define a global stylesheet declared in the styles array of your angular.json configuration file. and custom all mat styles within.
In Styles.css:
.mat-error {
color: aqua;
}
The result will be:
Please read Customizing Angular Material component styles article for better explanation.
I have a pretty standard veutify v-data-table with the standard pagination footer. I need to offset the footer items so they're not underneath an element that floats above them.
I've tried:
#table .v-data-footer {
padding: 0 100px !important;
}
and
.v-data-footer {
padding: 0 100px !important;
}
but neither way worked. We're using SCSS styling, not SASS, so the vue docs about footer-padding don't seem to help.
I've got reputation to spare, so the best answer will get 50 point bounty when 48 hours have passed.
Edit: I’m using Vuetify version 2.5.6
You can use the deep functionality to add scope to the class.
::v-deep .v-data-footer {
padding: 0 100px;
}
Change your style to padding: 100px 0 !important;. If this doesn't work, that means because of css specificity your style is not getting updated and you have to increase the specificity of your selector. For example if the data table has id as table-id you can try#table-id.v-data-table .v-data-footer to increase specificity.
If you are using older version of Vuetify then the class won't be .v-data-footer. It would be .v-datatable__actions
Vuetify v-app-bar has default css classeses v-toolbar__content and v-toolbar__extension that adds 16px padding on x-axis and 4px on y-axis that I want to get rid of.
I have tried overriding these classes in my css like below
.v-toolbar__content {
padding: 0px !important;
}
But it doesn't work. Anybody aware of some trick that would help get rid of the padding in v-app-bar?
In scoped styles, you cannot access child components directly. You need to use deep selector like this.
/deep/ .v-toolbar__content {
padding: 0px !important;
}
Or if you want to target using child selector, you can do:
.parent-class >>> .v-toolbar__content {
padding: 0px !important;
}
I recommend modifying the vuetify SCSS variables.
According to the v-toolbar API we can modify $toolbar-content-padding-y and $toolbar-content-padding-x in our variables style file.
$toolbar-content-padding-x: 0;
$toolbar-content-padding-y: 0;
If you haven't configured a variable file, please follow the SASS variables guide.
I want to edit my pagination CSS with this following CSS:
<style>
.ngx-pagination a{
margin: 0 3px ! important;
color: #9B9B9B ! important;
font-weight: bold ! important;
border: solid 1px #ccc ! important;
border-radius: 4px ! important;
text-decoration: none ! important;
}
</style>
but I don't know why after running my angular project and inspecting my browser I get this selector on my css [_ngcontent-c3]
why angular adding this unnecessarily selector by itself? I dont know how to remove this
_ngcontent-c# attributes are added when you use ViewEncapsulation.Emulated - which is default.
Angular uses these attributes to target specific elements with the styles. The number c is sort of a unique identifier of the host component. For example, if you have two components with the following templates:
ComponentA
<span></span>
<comp-b></comp-b>
ComponenB
<h1></h1>
Angular will mark all elements with styles inside component A as _ngcontent-c0 and all elements with styles inside component B with _ngcontent-c1:
<comp-a>
<span _ngcontent-c0></span>
<comp-b _ngcontent-c0>
<h1 _ngcontent-c1></h1>
</comp-b>
</comp-a>
This happens due to emulated view encapsulation. See more here angular.io/guide/component-styles#view-encapsulation
To remove this, use:
encapsulation: ViewEncapsulation.None
in the component decorator function. However, this will remove the encapsulation of your css components. In other words, your css will not be independent and it can be affected by other styles.
I am starting a new project, so i thought to start using Reset.css in my projects. i got the concept of using Reset.css, but one thing is bothering me is that does if affects my other style applied on the same element.. like in reset.css div have 0 margin and 0 padding... and if i apply margin to some of the divs in my stylesheet, wont it get disturbed?
Please clear my this doubt
Not if the style applied to your other divs is more SPECIFIC.
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
In general any style applied using a class, or an id in the selector is going to take precedence over one which doesn't. But there are many other rules in this area you should become aware of.
i.e.
div.myStyle {...}
will always overrule
div {...}
You have to include reset.css first and then include your own stylesheet file. and be sure that your styles wont be overwritten by reset.php.
What you neeed to do is load reset.css as a first style sheet.
Anything else loaded after it will be overriding reset.css
e.g if you specify in reset css: p { margin: 0px; padding: 0px}
and than load style.css with style: p {margin: 2px; padding: 2px}
The style load as last one will be used.
I personaly use technic with
* { margin: 0px; padding: 0px; border: 0px; outline: none; list-style: none;}
Put it at the top of css file and job done:) No need for extra .css fil.