Vuetify v-expand-transition spacing

Issue

If I want v-expand-transition to expand smoothly, then I have to remove all the margin, padding top/bottom around it because it increase height of the transition.

So is there anyway I can add spacing?

<v-card class="mb-5">
    <v-card-title class="justify-space-between pb-0">
      <slot name="tableTitle"></slot>
      <v-btn icon @click="toggleBtn = !toggleBtn"><v-icon>mdi-eye</v-icon></v-btn>
    </v-card-title>

    <v-expand-transition>
      <v-card-text v-show="toggleBtn" class="pb-0">
        <v-simple-table fixed-header height="300px">
          <template v-slot:default>
            <tbody>
              <tr v-for="item in tasks" :key="item.name">
                <td class="font-weight-medium" style="width: 70%">{{ item.name }}</td>
                <td class="text-orange">{{ item.due }}</td>
              </tr>
            </tbody>
          </template>
        </v-simple-table>
      </v-card-text>
    </v-expand-transition>
  </v-card>

Solution

I can't tell you exactly why this is but not using the v-show on the v-card-text, but instead wrapping the simple table in a div works. Then you can apply margins or paddings to the simple table.

<v-card class="mb-5">
  <v-card-title class="justify-space-between pb-0">
    <slot name="tableTitle"></slot>
    <v-btn icon @click="toggleBtn = !toggleBtn"><v-icon>mdi-eye</v-icon></v-btn>
  </v-card-title>

  <v-card-text>
    <v-expand-transition>
      <div v-show="toggleBtn">
        <v-simple-table fixed-header height="300px" class="mt-4">
          <template v-slot:default>
            <tbody>
              <tr v-for="item in tasks" :key="item.name">
                <td class="font-weight-medium" style="width: 70%">{{ item.name }}</td>
                <td class="text-orange">{{ item.due }}</td>
              </tr>
            </tbody>
          </template>
        </v-simple-table>
       </div>
    </v-expand-transition>
  </v-card-text>
</v-card>

Answered By - Jay Fridge