CODEWITHSUNDEEP
cssvue.jsvuetify.jsappbar
Meena Chaudhary
Meena Chaudhary

Reputation: 10715

Removing default padding on Vuetify v-app-bar

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?

Upvotes: 3

Views: 7950

Answers (2)

Nafees Anwar
Nafees Anwar

Reputation: 6608

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;
}

Upvotes: 11

Kevin Hansen
Kevin Hansen

Reputation: 31

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.

Upvotes: 2

Related Questions