5

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>
Dan
  • 59,490
  • 13
  • 101
  • 110
Ven
  • 89
  • 1
  • 8

3 Answers3

4

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;
}
Dan
  • 59,490
  • 13
  • 101
  • 110
  • I tried both versions and for some reason it still didn't work :( Thank you though, that was informative – Ven Jan 13 '21 at 10:38
  • Here you go, the proof: https://codepen.io/sh0ber/pen/gOwBZdN This is using the Vuetify example from the docs with just that style applied. – Dan Jan 13 '21 at 10:50
  • Also, your ` – Dan Jan 13 '21 at 10:50
  • It's working now! And yes the scoped was a typo. Thank you so much. The ``scoped`` was the problem all along. Thank you, you're a life saver! – Ven Jan 13 '21 at 11:53
  • 2
    You're welcome, I'm glad it helped :) You could also try the `>>>` syntax as in [this answer](https://stackoverflow.com/questions/48032006/how-do-i-use-deep-or-in-vue-js/55368933#55368933) if you need to keep the `scoped` attribute. – Dan Jan 13 '21 at 11:54
  • 1
    Ohh this is the first time I heard of that. Will do! Thank you so much :D – Ven Jan 13 '21 at 11:59
1

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;
}
Bishwas
  • 183
  • 2
  • 18
0

As of today use $data-table-expanded-content-box-shadow variable to remove box shadow like this $data-table-expanded-content-box-shadow: none;

vadym1930
  • 66
  • 6