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.
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
I have drop-down in vue component and class of that element is "form-control" and it has it's own styles. I need to override the styles of that class. for that I have done coding as follows (in vue component),
<style scoped>
.form-control{
border-radius: 50px !important;
color: #823F98 !important;
border: 1px solid #3FA294 !important;
}
</style>
but this one didn't work for me. so, how to override it?
Thank you!
Using unscoped style can be very dangerous especially general class names like form-control.
I think it's a better way to use deep styles in your parent component:
<style scoped>
>>>.form-control{
border-radius: 50px !important;
color: #823F98 !important;
border: 1px solid #3FA294 !important;
}
</style>
but if you can refactor your child component and add a props like formControlStyle with your CSS styles would be the best solution to avoid side effects. You can add a default value to this prop that is your styles in your child component.
You should remove scoped. If you leave scoped it will not apply on other components including those you import.
Or move that css in app.css or app.scss.
Use Deep Selector, ie, :deep(.whatever-style-name) you want to override in your current component
<style scoped>
:deep(.form-control) {
border-radius: 50px;
color: #823F98;
border: 1px solid #3FA294;
}
</style>
by doing this, you can remove the need to use '!important' in every line of css codes that needs overiding.
Refer here in the Vue official docs for more info.
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.
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.