Change padding of vuetify v-expansion-panel-content

Question

I have multiple casceded v-expansion-panels to visualize a folder sturcture. Like in this example with items and innerItems

  <v-expansion-panels
     accordion
     focusable
  >
     <v-expansion-panel
        v-for="(item, x) in items"
        :key="x"
     >
        <v-expansion-panel-header> {{ item.header }}</v-expansion-panel-header>
        <v-expansion-panel-content class="v-expansion-panel-content">
           <v-expansion-panels>
             <v-expansion-panel
                v-for="(innerItem, y) in innerItems"
                :key="y"
             >
                <v-expansion-panel-header> {{ innerItem.header }} </v-expansion-panel-header>
                <v-expansion-panel-content> {{ innerItem.content }} </v-expansion-panel-content>
               </v-expansion-panel>
            </v-expansion-panels>
        </v-expansion-panel-content>
     </v-expansion-panel>
  </v-expansion-panels>

So I get this

But I need the inner expansion-panel to be on the right side like this

I achieved this by editing the .v-expansion-panel-content__warp in the browser editor (just to get what I want it to look like) but how can I get access to this self generated div/css-class

There is already a question regarding the panel-header (Stylization vuetify component v-expansion-panel__header) but I dont get this question or the answer...

Maybe someone can point me in the right direction or had the same problem and can show me a way to fix this!

Thanks!

Answer 1

You can use the VueJS deep selector to override the styling for the content wrap as follows. The approach will depend on whether you are using a pre-processor such as Sass/Scss or not.

As the Vue deep selector docs state:

Some pre-processors, such as Sass, may not be able to parse >>> properly. In those cases you can use the /deep/ or ::v-deep combinator instead - both are aliases for >>> and work exactly the same.

When using CSS

Use >>> to access the v-expansion-panel-content__wrap class.

.v-expansion-panel-content>>> .v-expansion-panel-content__wrap {
  padding: 0 !important;
}

When using SASS/SCSS

Use ::v-deep to access the v-expansion-panel-content__wrap class.

.v-expansion-panel-content::v-deep .v-expansion-panel-content__wrap {
  padding: 0 !important;
}

Only modifying specific expansion panels

You can also add custom classes/ids to further narrow down on what expansion panel you would like to style. For example:

<v-expansion-panel-content id="expansion-panel-content-1">

could be specifically modified as follows:

#expansion-panel-content-1::v-deep .v-expansion-panel-content__wrap {
  padding: 0 !important;
}

Versions I'm using

Using Vuetify 2.5.x with NuxtJS 2.15.x

Answer 2

So I fixed it like this

#innerExPan > * {
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 50px;
}

And added the id to the

<v-expansion-panel-content id="innerExPan">
...