CODEWITHSUNDEEP
cssvuetify.jsvuetifyjs3
user3534080
user3534080

Reputation: 1455

Vuetify 3 V-List-Item active class - full width

In Vuetify 2, the styling of our nav drawer's active list item was grey for the full width: enter image description here

In Vuetify 3, it is not the full width (it also added rounding, but I fixed that w/ rounded="0"): enter image description here

How can i force the active highlight to full width? I've tried messing around with active-class and a custom CSS, but any width/max-width/min-width/padding/margin/etc styles I've tried messing with don't seem to impact this width, and I haven't been able to figure out where this is coming from by inspecting the page.

Upvotes: 0

Views: 567

Answers (1)

user3534080
user3534080

Reputation: 1455

After much trial and error, I eventually found it.

Adding this made it go away when using vue-cli-service serve, though it did cause side effects (see further down)

.v-list--nav {
  padding-inline-start: 0px;
  padding-inline-end: 0px;
}

For some reason you need to do this, too, or your prod version won't look the same:

.v-list--nav {
  -webkit-padding-start: 0px;
  padding-inline-start: 0px;
  -webkit-padding-end: 0px;
  padding-inline-end: 0px;
}

And to fully make side-effects go away, I had to do this:

.v-list--nav {
  -webkit-padding-start: 0px;
  padding-inline-start: 0px;
  -webkit-padding-end: 0px;
  padding-inline-end: 0px;
}

.item-icon :deep(.v-icon) {
  margin-left: 8px;
}

.v-list-item--disabled {
  margin-left: 8px;
}

Upvotes: 0

Related Questions