单元表中的选择选项由表高度按打开的表格隐藏

Question

我有一张表，对于每一行，有两个带有“选择”的单元格是，当打开它们时，它们被加载到表中，并且只有在打开“ Select”时加载的滚动栏时，这些选项才能很好地看到“我可以看到所有选项。

如果尝试打开它

我只有在向下滚动滚动栏滚动时才能看到选项。

我该如何解决？

我正在使用汤姆选择来生成选择。

var g_index =0;
var unidades_list = [
    {
        "IdUnidad": "1",
        "Nombre": "Casa conde",
        "Direccion": "Isla del coco",
        "Estado": "1"
    },
    {
        "IdUnidad": "3",
        "Nombre": "123",
        "Direccion": "999",
        "Estado": "1"
    },
    {
        "IdUnidad": "5",
        "Nombre": "casa margarita",
        "Direccion": "Isla el c",
        "Estado": "1"
    },
    {
        "IdUnidad": "6",
        "Nombre": "test",
        "Direccion": " Prueba api",
        "Estado": "1"
    },
    {
        "IdUnidad": "7",
        "Nombre": "Isla tortuga",
        "Direccion": "Colombia",
        "Estado": "1"
    }
 ]
function reload_select_unidades(IdSelect){


    let tem_unit = new TomSelect('#IdUnidad_'+IdSelect,{
        valueField: 'IdUnidad',
        labelField: 'Nombre',
        searchField: 'Nombre',
        maxItems: 1,
        options:unidades_list,
        render: {
            item: function(item, escape) {
                return `<div><span>
                            ${ escape(item.Nombre) }
                        </span></div>`;
            },
            option: function(item, escape) {
                return `<div><a class="list-group-item list-group-item-action">
                            ${ escape(item.Nombre) }
                        </a></div>`;
            }
        },
    });
 }
 jQuery(".add-new").click(function(){
    var index = jQuery("#table-data-list tbody tr:last-child").index();
    var val_index = g_index;
    var row = '<tr id="trow_'+val_index+'">' +
        '<td><input id="IdUnidad_'+val_index+'" name="IdUnidad" required></td>' +
        '<td><input type="text" class="form-control item-t-value" name="DetalleMovimiento"></td>' +
        '<td><input type="text" class="form-control item-t-value" name="TC"></td>' +
        '<td>'+
        '<div class="input-group mb-3">' +
        ' <div class="input-group-prepend"><span class="input-group-text" id="simbol-addon_D'+val_index+'">$</span></div>'+
        '<input type="text" class="form-control item-t-value" aria-describedby="simbol-addon_D'+val_index+'" name="MontoD">'+
        '</div>'+
        '<div class="input-group mb-3">' +
        ' <div class="input-group-prepend"><span class="input-group-text" id="simbol-addon_C'+val_index+'">₡</span></div>'+
        '<input type="text" class="form-control item-t-value" aria-describedby="simbol-addon_C'+val_index+'" name="MontoC">'+
        '</td>' +
        '<td>'+
        '<div class="input-group mb-3">' +
        ' <div class="input-group-prepend"><span class="input-group-text" id="simbol-addon_D'+val_index+'">$</span></div>'+
        '<input type="text" class="form-control item-t-value" aria-describedby="simbol-addon_D'+val_index+'" name="IVAD">'+
        '</div>'+
        '<div class="input-group mb-3">' +
        ' <div class="input-group-prepend"><span class="input-group-text" id="simbol-addon_C'+val_index+'">₡</span></div>'+
        '<input type="text" class="form-control item-t-value" aria-describedby="simbol-addon_C'+val_index+'" name="IVAC">'+
        '</td>' +
        '<td>'+
        '<div class="input-group mb-3">' +
        ' <div class="input-group-prepend"><span class="input-group-text" id="simbol-addon_D'+val_index+'">$</span></div>'+
        '<input type="text" class="form-control item-t-value" aria-describedby="simbol-addon_D'+val_index+'" name="TotalD">'+
        '</div>'+
        '<div class="input-group mb-3">' +
        ' <div class="input-group-prepend"><span class="input-group-text" id="simbol-addon_C'+val_index+'">₡</span></div>'+
        '<input type="text" class="form-control item-t-value" aria-describedby="simbol-addon_C'+val_index+'" name="TotalC">'+
        '</td>' +
        '<td>' + '-' + '</td>' +
        '</tr>';
    let nele = jQuery(row);
    jQuery("#table-data-list").append(nele);
    jQuery('[data-toggle="tooltip"]').tooltip();
    reload_select_unidades(val_index);
  g_index++;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

<div class="container-lg">
        <div class="table-responsive">
            <div class="table-wrapper">
            <div class="table-title">
                <div class="row">
                <div class="col-sm-4">
                    <button type="button" class="btn btn-info add-new">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus align-middle me-2">
                        <line x1="12" y1="5" x2="12" y2="19"></line>
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                    </svg>Add New </button>
                </div>
                </div>
            </div>
            <table width="100%" style="min-heith:400px;" id="table-data-list" class="table table-bordered">
                <thead>
                <tr>
                    <th width="12.5%" >Unidad</th>
                    <th width="20%">Detalle</th>
                    <th width="8.5%">TC</th>
                    <th width="15.5%">Monto </th>
                    <th width="15.5%">IVA </th>
                    <th width="15.5%">Total </th>
                    <th style="width:50px;"></th>
                </tr>
                </thead>
                <tbody></tbody>
                
            </table>
            </div>
        </div>
    </div>

Answer 1

也许只是设置溢出：可见的是创建idunidad的元素。
添加类：

class="IdUnidad"

SO：

<td><input class="IdUnidad" id="IdUnidad_'+val_index+'" name="IdUnidad" required></td>

CSS：

.idUnidad {
   overflow: visible;
}