Remove Box Shadow from Expandable Data Table in Vuetify

user_13665600 0
Viewed 2204

I can't seem to remove the box shadow in the expandable data table in Vuetify. I tried using inline css by adding box-shadow: none and even

<style scope>
.v-data-table__expanded .v-data-table__expanded__content {
  box-shadow: none;
}

I also tried using elevation="0" in the data table hoping it would work but to no avail it still doesn't. Can anyone help me?

This is what it currently looks like: enter image description here


I just used the code in vuetify but for convenience this is the code:

    <div class="my-6">
      <v-text-field
        v-model="search"
        label="Search"
        class="mx-4"
        prepend-inner-icon="mdi-magnify"
        outlined
        dense
        hide-details
      ></v-text-field>
    </div>
    <template>
      <v-data-table
        :headers="dessertHeaders"
        :items="desserts"
        :single-expand="true"
        :expanded.sync="expanded"
        item-key="name"
        dense
        show-expand
        :search="search"
        :custom-filter="filter"
        elevation="0"
      >
        <template v-slot:expanded-item="{ headers, item }" elevation="0">
          <td :colspan="headers.length" elevation="0">More info about {{ item.name }}</td>
        </template>
      </v-data-table>
    </template>
vuejs2 vue-component vuetify.js vue.js css
2 Answers

Use the following CSS:

.v-data-table__expanded.v-data-table__expanded__content {
  box-shadow: none !important;
}

Since the classes are on the same element, you don't want a space in between them, which signifies a parent / (grand)child relationship.

Here's another option that wouldn't require the !important modifier:

.v-data-table > .v-data-table__wrapper tbody tr.v-data-table__expanded__content {
  box-shadow: none;
}
user_21850930

Just in case if anyone having trouble with the above solution By Dan. This worked for me as mentioned by him in the comment section. See his comment or go to this link for more.

.v-data-table >>> .v-data-table__wrapper tbody tr.v-data-table__expanded__content {
  box-shadow: none;
}
user_132336530
Related