table 内的 ngx-dropdown 可见性使用属性溢出可见

Question

我正在尝试在可滚动 table 中使用 NGX dropdown menu，但是在最后一行，下拉菜单被默认隐藏的溢出截断。

为了克服这个问题，我将 table-responsive class 设置为具有以下属性：

.table-responsive {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

这导致它具有所需的外观但是禁用我的 table 可滚动：

如果我删除，

 overflow-x: visible !important;

我越来越接近我想要的结果，但是我希望下拉菜单溢出容器，而且下拉菜单的内容最初是隐藏的。

有没有一种方法可以使下拉菜单像第二张图片一样显示为可滚动的 table。

<div class="table-responsive">
    <table class="table table-bordered table-hover">
       <div class="btn-group" dropdown>
          <button class="btn btn-link" dropdownToggle>
              <em class="fas fa-ellipsis-v fa-lg"></em>
          </button>
          <div *dropdownMenu class="dropdown-menu animated fadeInRight" role="menu">
               <a [routerLink]="['/folder/editor', row[column.name]]" class="dropdown-item">
                   <em class="fas fa-fw fa-pencil-alt mr"></em>
                   <span>View/Edit</span>
               </a>
               <div class="dropdown-divider"></div>
               <a [routerLink]="" (click)="openTransferLogModal(row[column.name])" class="dropdown-item">
                    <em class="fas fa-fw fa-list-ul mr"></em>
                    <span>1</span>
                    <span>1</span>
                    <span>1</span>
                    <span>1</span>
          </div>
     </div>
<div class="table-responsive">
    <table class="table table-bordered table-hover">

Answer 1

这是 table 中的最后一行吗？您是否尝试过只针对 ::nth-last-child 选择器，或者如果它的 NgFor Angular 有一个 last-child，您也可以利用它在下拉列表本身上设置一个 class。

无论哪种方式，答案都是调整最后一行下拉菜单的绝对位置。不要乱用 table 样式。

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child

http://plnkr.co/edit/evR8YKXgvpYWqHgt8zZE?p=preview

https://github.com/angular/angular/issues/10856

Answer 2

这是@Jacebot

提出的解决方案讨论的延续

因此，在我从事该项目之前，我发现下拉菜单的“append to body”部分已从代码中删除。

把它放回去，使 dropdown go behind 正文的 z-index 成为我的 table。

所以我没有附加到正文，而是附加到 table。

<div class="btn-group" dropdown container="table">
     <button class="btn btn-link" dropdownToggle>
          <em class="fas fa-ellipsis-v fa-lg"></em>
     </button>
 ....

table 内的 ngx-dropdown 可见性使用属性溢出可见

ngx-dropdown visibility within table using property overflow visible

css

angular

overflow

ngx-bootstrap

table 内的 ngx-dropdown 可见性使用 属性 溢出可见

ngx-dropdown visibility within table using property overflow visible

css

angular

overflow

ngx-bootstrap

table 内的 ngx-dropdown 可见性使用属性溢出可见