I'm encountering an issue with a button styled dropdown. Here is the code snippet:
<template>
<div class="datatable-wrapper">
<div class="table-container">
<table class="table datatable-table is-fullwidth">
<thead>
<tr>
<th class="col-estatus" align="center"gt;
Action
</th>
<th class="col-estatus" align="center">
id_client
</th>
<th class="col-estatus" align="center">
client_txid
</th>
<th class="col-estatus" align="center">
id_file
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(item, index) in paginatedData"
:key="index"
>
<td class="col-id-cliente" align="center">
<VDropdown icon="feather:more-vertical">
<template #content >
<div class="dropdown-item pointer" @click="viewDetails(item)"> Details </div>
<div class="dropdown-item pointer" @click="opction2"> Option 2 </div>
<div class="dropdown-item pointer" @click="opction3"> Option 3 </div>
</template>
</VDropdown>
</td>
<td class="col-id-cliente" align="center">{{ item.id_client }}</td>
<td class="col-id-beneficiario" align="center">{{ item.client_txid }}</td>
<td class="col-id-cliente" align="center">{{ item.id_file }}</td>
</tr>
</tbody>
</table>
</div>
<VFlexPagination
v-model:current-page="page"
:item-per-page="itemsPerPage"
:total-items="data.length"
:max-links-displayed="7"
no-router
class="mt-4"
/>
</div>
</template>
When I click on the action, this happens:
https://i.sstatic.net/0k2dEQBC.png
As you can see, the dropdown options are not displayed correctly.
I tried adding "position: absolute" to the VDropdown tag, but the action option remains static. So when I scroll horizontally, it overlaps the other columns. What should I do to ensure the dropdown options display correctly?