css - 数据表隐藏的Bootstrap 4下拉列表

我正在使用Bootstrap4为DataTables网格中的每一行创建一个带有DropDown菜单的按钮，但是当我单击按钮时，datatables页脚剪切了菜单，我正在使用angular5，bootstrap4。
我已经尝试过溢出：对于下拉菜单可见！重要，但是它不起作用

问题的图片：



代码：

<table id="e-commerce-products-table" class="table dataTable">
                    <thead>
                        <tr>
                            <th>
                                <div class="table-header">
                                    <span class="column-title">ID</span>
                                </div>
                            </th>
                            <th>
                                <div class="table-header">
                                    <span class="column-title">Status</span>
                                </div>
                            </th>
                            <th>
                                <div class="table-header">
                                    <span class="column-title">Date Creation</span>
                                </div>
                            </th>
                            <th>
                                <div class="table-header">
                                    <span class="column-title">Client</span>
                                </div>
                            </th>
                            <th>
                                <div class="table-header">
                                    <span class="column-title">Actions</span>
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor='let c of dossiers'>
                            <td class="name">{{c.numero}}</td>
                            <td class="type d-none d-md-table-cell">{{c.status}}</td>
                            <td class="owner d-none d-sm-table-cell">{{c.dateCreation}}</td>
                            <td class="size d-none d-sm-table-cell">
                                <a class="icon-eye" data-toggle="modal" data-target="#gridSystemModal" (click)="affectationClient(c.client.idClient)"></a>
                            </td>
                            <td class="last-modified d-none d-lg-table-cell">
                                <div class="dropdown ">
                                    <button type="button" class="btn btn-icon" aria-label="btnGroup" data-toggle="dropdown">
                                        <i class="icon icon-dots-vertical"></i>
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-right " id="myMenu" aria-labelledby="btnGroup">
                                        <button class="dropdown-item" data-toggle="modal" data-target="#modifierDossier" (click)="affectationDossier(c)">Modifier Dossier</button>
                                        <button class="dropdown-item" data-toggle="modal" data-target="#supprimerDosssier" (click)="affectationClient(c.client.idClient)">Supprimer Dossier</button>
                                        <a class="dropdown-item" href="dossiers/details?id={{c.id}}">Details Dossier</a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>

最佳答案

第一：

.dropdown-menu {   position: fixed; }

将dropdown-button id添加到button，因此它将是：

<button type="button" class="btn btn-icon" id="dropdown-button" aria-label="btnGroup" data-toggle="dropdown">

接着：

$('#dropdown-button').click(function() {
  dropDownFixPosition($('#dropdown-button'), $('.dropdown-menu'));
});
function dropDownFixPosition(button, dropdown) {
  var dropDownTop = button.offset().top + button.outerHeight();
  dropdown.css('top', dropDownTop + "px");
  dropdown.css('left', button.offset().left + "px");
}

关于css - 数据表隐藏的Bootstrap 4下拉列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50898880/