I’m getting some issue with buttom with dropdown style, this is the code:
<template>
<div class="datatable-wrapper">
<div class="table-container">
<table class="table datatable-table is-fullwidth">
<thead>
<tr>
<th class="col-estatus" align="center">
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"> Opcion 2 </div>
<div class="dropdown-item pointer" @click="opction3"> Opcion 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 clicked on action, I got this:
you can see that the dropdowns options don’t see right
so I tried to use “position: absolute” on tag VDropdown
but the action option stay static, so when I scroll horizontal It is above the other columns, what can I do if I just want the dropdown opction see right