myesn

myEsn2E9

hi
github
HomeArchives作品集开发助手水龙头

Issue of reduced header column width when displaying DataTable in Bootstrap Modal

#ABP#DataTables#Bootstrap147
AI Translation
This post is translated from Chinese into English through AI.View Original
AI-generated summary
The issue in the title is that all columns are aligned to the left and some are overlapping. The solution is to adjust the column width in a DataTable displayed within a Bootstrap Modal by using the provided JavaScript code.

The issues in the title are as follows:
image

It can be seen that all columns are aligned to the left and some are even overlapping.

Solution:


const dataTable = $('#Table').DataTable(..);

$(document).on('shown.bs.modal', function () {
    // fix: When displaying DataTable in Bootstrap Modal, there is an issue with the narrowing of column widths
    // https://stackoverflow.com/a/43826114
    dataTable.columns.adjust();
});

Executing the above js code in the Modal will fix it.

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.