Bootstrap SelectPicker 下拉菜单在 dataTable 中未正确显示？

Question

I am dynamically binding data to jquery datatable using ajax. Each row contain dropdown bootstrap selectpicker as below:

Now when I am selecting dropdown it's UI is breaking as below

How have tried to fix it but no luck

You can check my code below

HTML

<table id="tbl_BankData" class="table table-striped table-bordered nowrap" cellspacing="0" style="width: 100%">
<thead class="table table-striped table-bordered" style="background-color :#4b5d67; color:white; width:100px">
    <tr>
        <th class="clsLoanTh"><input type='checkbox' onclick="toggle(this)" id="SelectAll" /></th>
        <th>Sno</th>
        <th>Date</th>
        <th>Transaction Id</th>
        <th>Narration</th>
        <th>Amount</th>
        <th>Collection Type</th>
        <th>Loan</th>
        <th>Customer Name</th>
        <th>Status</th>
    </tr>
</thead>
<tbody></tbody>

Script

$.ajax({
            url: '@Url.Action("Action", "Controller")',
            data: '{tranDate: "' + tranDate + '",bankCode: "' + bankCode + '",status: "' + status + '",input: "' + input + '"}',
            datatype: "json",
            contentType: "application/json; charset-utf-8",
            type: 'POST',
            success: function (response) {
                //for display message(you can Allocate only transactionDate 16 Nov 2021)
                if (response.Msg != '' && response.Msg != undefined) {
                    ShowAlert(response.Msg);
                }
                $('#tbl_BankData').show();
                var tablecontent = "";
                $('#tbl_BankData').dataTable().fnDestroy();
                if (response.Data.length > 0) {
                    var rowId = 1
                    $.each(response.Data, function (key, value) {
                        //bind dropdown loannumber
                        var ddlLoanStr = '';
                        if (response.LoanAccount != undefined && response.LoanAccount.length > 0) {
                            ddlLoanStr = '<select class="form-control clsLoanAccNo cl" onchange="setChk(this.value, ' + rowId + ');" id="process"><option value="">--Select Loan AccountNo--</option>';
                            console.log('response.LoanAccount', response.LoanAccount);
                            $.each(response.LoanAccount, function (key, value) {
                                ddlLoanStr += '<option value="' + value.LoanAccountNo + '">' + value.CustomerName + '</option>';
                            });
                            ddlLoanStr += '</select>';
                        }
                        var ddlCollectionType = '';
                        if (response.CollectionTypeList != undefined && response.CollectionTypeList.length > 0) {
                            ddlCollectionType = '<select class="form-control clsType" onchange="setChk(this.value, ' + rowId + ');" id="process"><option value="">--Select Type--</option>';
                            console.log('response.CollectionTypeList', response.CollectionTypeList);
                            $.each(response.CollectionTypeList, function (key, value) {
                                ddlCollectionType += '<option value="' + value.CollectionType + '">' + value.CollectionType + '</option>';
                            });
                            ddlCollectionType += '</select>';
                        }
                        tablecontent += "<tr>";
                        tablecontent += "<td class='clsLoanTh text-center'><input type='checkbox' class='clsLoanChk check" + rowId + "' id='Chkid' name='foo'  data-loan-no='" + value.LoanAccountNo + "'/>";
                        tablecontent += "<td class='clsRowNo'>" + rowId + "</td>";
                        tablecontent += "<input type='hidden' class='form-control clsAccountSno' id='txtSerialNo" + rowId + "' value = '" + value.SerialNo + "'></td>";
                        tablecontent += "<td>" + ToJavaScriptDate(value.TransactionDate) + "</td>";
                        tablecontent += "<td>" + value.GlAccountCode + "</td>";
                        tablecontent += "<td>" + value.BankSerialNo + "</td>";
                        tablecontent += "<td>" + parseFloat(value.Amount).toFixed(2) + "</td>";
                        tablecontent += "<td>" + (status == 'Pending' ? ddlCollectionType : value.CollectionType) + "</td>";
                        tablecontent += "<td>" + (status == 'Pending' ? ddlLoanStr : value.LoanAccountNo) + "</td>";
                        tablecontent += "<td class='name' id ='CustomerName" + rowId + "'>" + value.CustomerName + "</td>";
                        tablecontent += "<td>" + value.Status + "</td>";
                        tablecontent += "</tr>";
                        rowId++;
                    });
                    
                }
                console.log(tablecontent);
                $('#tbl_BankData tbody').html(tablecontent);
                dropdownSearch();
                $('#tbl_BankData').dataTable({
                    "paging": false,
                    "ordering": false,
                    "info": true,
                    "searching": true,
                    "scrollX": true,
                    "scrollY": "250px",
                    "bProcessing": true,
                    "bSort": false,
                    "bScrollCollapse": true,
                    "lengthMenu": [8,10, 15, 20, 25, 50, 75, 100],//Pagelength
                    "footerCallback": function (row, data, start, end, display) {     //to set the footer
                        var api = this.api(), data;
                        var intVal = function (i) {
                            //Checking the anchor('a') if there finding the value and assigning.
                            if ($(i).is('a'))
                                i = $(i).html();
                            return typeof i === 'string' ?
                                i.replace(/[\$,]/g, '') * 1 :
                                typeof i === 'number' ?
                                i : 0;
                        };
                    },

                    dom: 'lBftpi', 
                    buttons: [
                             {
                                 extend: 'excel',
                                 filename: function () {
                                     return '@(Model.Item1[0].MenuName)+_+@(String.Format("{0:s}", DateTime.Now))';
                                 },
                                 footer: true,
                             },
                    ],
                    //Adding Images
                    initComplete: function () {
                        $('.buttons-excel').html('<img src="../Images/Excel_Table.jpg" />')
                        $('#tbl_BankData').DataTable().columns.adjust();
                        HideProgress();
                    }
                });

I have tried many ways not able to fix the issue Please help me to fix this issue. Any help will be appreciated

Thanks in Advance

Answer 1

You can use the option --> container: 'body' into the select, it worked for me.

<select style='with: 60px;' class='form_select selectpicker' data-container='body' data-live-search='true' id='select_id''>

Regards,

Federico.