Ngx Bootstrap 下拉菜单无法在 ag 网格中显示完整列表答案

【问题标题】：Ngx Bootstrap Dropdown cannot show full list within ag gridNgx Bootstrap 下拉菜单无法在 ag 网格中显示完整列表
【发布时间】：2019-12-11 19:37:28
【问题描述】：

我正在使用 Customer Ag Grid Cell Render 在 ag 网格中显示下拉菜单。发现最后一行无法显示完整的下拉列表，而第一行可以显示完整的下拉列表。

.ag-cell 类在单元格/行中有可见的下拉列表。但似乎网格的样式为overflow: hidden。

example-render.component.ts


@Component({
  selector: 'app-example-render',
  templateUrl: './example-render.component.html',
  styleUrls: ['./example-render.component.less']
})
export class ExampleRenderComponent implements ICellRendererAngularComp  

  agInit(params: any): void {
    this.value = params.value;
  }

  refresh(params: any): boolean {
    return false;
  }

}

example-render.component.html

<div class="btn-group" dropdown>
    <button id="button-basic" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
            aria-controls="dropdown-basic">
      Button dropdown <span class="caret"></span>
    </button>
    <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
        role="menu" aria-labelledby="button-basic">
      <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
      <li class="divider dropdown-divider"></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
      </li>
    </ul>
  </div>

app.component.ts

import { ExampleRenderComponent } from './example-render/example-render.component';
import { Component } from '@angular/core';
import { GridOptions } from 'ag-grid-community';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {

  title = 'app';

  columnDefs = [
      {headerName: 'Col1', field: 'col1'},
      {headerName: 'Col2', field: 'col2'},
      {headerName: 'Col3', field: 'col3', 
        cellRendererFramework: ExampleRenderComponent,
        cellStyle: { "overflow": 'visible' }
      }
  ];

  rowData = [
      { col1: 'Data 11', col2: 'Data 12', col3: 'Data 13' },
      { col1: 'Data 21', col2: 'Data 22', col3: 'Data 23' },
      { col1: 'Data 31', col2: 'Data 32', col3: 'Data 33' }
  ];

  gridOptions: GridOptions = <GridOptions> {
    rowHeight: 100
  }
}

app.component.html

<div>
    <ag-grid-angular 
      style="width: 1000px; height: 300px;" 
      class="ag-theme-balham"
      [rowData]="rowData" 
      [columnDefs]="columnDefs"
      [gridOptions]="gridOptions">
    </ag-grid-angular>
</div>

app.component.less

/deep/ actions-button-cell {
    overflow:visible; 
}

/deep/ .ag-cell { 
    overflow:visible; 
}

/deep/ .ag-row {
    z-index: 0;
}

/deep/ .ag-row.ag-row-focus {
    z-index: 1;
}


/deep/ .ag-root,
/deep/ .ag-body-viewport,
/deep/ .ag-body-viewport-wrapper {
    overflow: visible !important;
}

stackblitz：https://stackblitz.com/edit/angular-eumtpf

【问题讨论】：

stackblitz 将使我们更容易提供帮助...
感谢@AkberIqbal。随附的。 stackblitz.com/edit/angular-eumtpf

标签： angular ag-grid ngx-bootstrap

【解决方案1】：

以下解决了问题

app.component.less

/deep/ actions-button-cell {
    overflow:visible; 
}

/deep/ .ag-cell { 
    overflow:visible; 
}

/deep/ .ag-row {
    z-index: 0;
}

/deep/ .ag-row.ag-row-focus {
    z-index: 1;
}

/deep/ .ag-root,
/deep/ .ag-root-wrapper,
/deep/ .ag-body-viewport,
/deep/ .ag-body-viewport-wrapper, 
/deep/ .ag-center-cols-clipper,
/deep/ .ag-center-cols-viewport {
    overflow: visible !important;
}

【讨论】：

【解决方案2】：

该控件现在支持执行此操作的新方法，无需使用大量杂乱的 CSS。

只需将 container="body" 添加到下拉指令行：

<div class="btn-group" dropdown container="body">
....
</div>

其余的都为您完成。您可以摆脱所有 /deep/ 或 :host CSS。

文档在这里： Dropdown append to body

【讨论】：