selection options in cell table are hidden by table height on open select

Question

I have a table that for each row, there are two cells with "select" the problem is that when opening them they are loaded inside the table and the options cannot be seen well, only if the scrollbar that is loaded when opening the "select" I can see all the options.

if a try to open it

I only see the options if I scroll the scroll bar down.

How can i fix this?

I am using Tom Select to generate the selects.

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

Maybe just set overflow: visible for elements in creating IdUnidad. Add class:

class="IdUnidad"

so:

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

css:

.idUnidad {
   overflow: visible;
}