Why are dropdown lists or tooltips obscured when adding <cv-multi-select> or <cv-tooltip> tags to the body of <cv-data-table>? #1801
Description
Why do the dropdown list or tooltip get obscured when I add the or tag to the body of , and how can I fix it so that it is not obscured?
<cv-data-table>
<template #headings>
<cv-data-table-heading>
</cv-data-table-heading>
<cv-data-table-heading v-for="header in tableHeaders" :key="header.key">{{ header.value }}</cv-data-table-heading>
</template>
<template #data>
<cv-data-table-row v-for="row in dataList" :id="row.userId" :key="row.userId" :value="row.userId">
<cv-data-table-cell class='cell_cel'>
<cv-tooltip v-if='row.documentType&&row.documentType.length>15' :alignment='alignment' :direction='direction' :tip='row.documentType'>
<span class='tooltip_span'>{{ row.documentType.substring(0,15) + '...' }}</span>
</cv-tooltip>
<span v-if='!row.documentType||(row.documentType&&row.documentType.length<=15)'>{{ row.documentType }}</span>
</cv-data-table-cell>
<cv-data-table-cell class="cell_cel">{{row.email}}</cv-data-table-cell>
<cv-data-table-cell class="cell_cel">
<div style="margin-bottom: 0.5rem;">
<cv-multi-select
class="select-input"
v-model="legalEntityCode"
title=""
:options="optionsEntity"
:label="labelEntity"
@change="entityChange"
>
</cv-multi-select>
</div>
</cv-data-table-cell>
<cv-data-table-cell style="padding-left: 5px;">
<cv-button @click="deleteAudit(row)" kind="danger--ghost" size="sm">{{ $t('UserManagementTable.delete') }}</cv-button>
</cv-data-table-cell>
</cv-data-table-row>
</template>
</cv-data-table>Please see the code snippet above. Adding <cv-multi-select> or <cv-tooltip> to <cv-data-table-cell> within <cv-data-table> causes the dropdown or tooltip to be partially obscured by the table, making it incomplete. How can this be corrected?
