I'm dealing with a table that includes an 'approved' column with three conditions. One of these conditions triggers the appearance of a delete button along with a confirmation dialog box made using Vuetify's dialog component.
The issue arises when the delete button appears, causing a horizontal scroll bar to show up at the bottom of the table. How can I resolve this problem?
<v-data-table
:items="allLists"
:headers="headers"
:search="search"
class="mx-3"
>
<template v-slot:item.approved="{ item }">
<v-container fluid>
<v-checkbox v-model="item.checked" id="checkbox"></v-checkbox>
</v-container>
</template>
<template v-slot:item.action="{ item }">
<v-row>
<v-btn
text
dark
rounded
color="success"
v-if="item.checked === true"
>
<v-img
:src="require('../assets/success.svg')"
v-if="item.checked === true"
max-width="30px"
></v-img>
</v-btn>[enter image description here][1]
<template
v-if="item.checked === false"
>
<v-row>
<v-dialog v-model="dialog" max-width="290">
<template v-slot:activator="{ on }">
<v-row class="mx-3">
<v-btn
color="error"
text
dark
rounded
v-on="on"
>
<v-img
:src="require('../assets/deletenew.svg')"
max-width="29px"
></v-img>
</v-btn>
</v-row>
</template>
<v-card>
<v-card-title class="red headline white--text">Confirm Delete</v-card-title>
<br>
<v-card-title style="font-weight: bold; font-size: 16px" class="justify-center">
Are You Sure?
</v-card-title>
<v-card-actions>
<v-btn color="primary"
class="font-weight-bold"
text
@click="dialog = !dialog"
>
No
</v-btn>
<v-spacer></v-spacer>
<v-btn
color="primary"
class="font-weight-bold"
text
@click="dialog = !dialog"
v-on:click="del(item.pk)"
>
Yes
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<v-btn
text
dark
rounded
color="warning"
v-if="item.checked == null"
>
<v-img
:src="require('../assets/warning.svg')"
max-width="29px"
></v-img>
</v-btn>
</v-row>
</template>
</v-data-table>