Question

我使用Bootstrap4为DataTables网格中的每一行创建一个带有DropDown菜单的按钮，但是当我单击该按钮时，数据表页脚使用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>

Answer 1

首先：

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

将按钮 - 按钮ID添加到按钮，所以它将是：

$('#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");
}

然后：

(50000000, 4096)

由数据表隐藏的Bootstrap4下拉列表

1 个答案: