angular - Ngx Bootstrap Dropdown 无法显示 ag 网格中的完整列表

Question

我正在使用客户农业网格单元渲染来显示农业网格中的下拉列表。发现最后一行无法显示完整的下拉菜单，而第一行可以显示完整的下拉菜单。

类.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;
}

堆栈 Blitz :https://stackblitz.com/edit/angular-eumtpf

Answer 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;
}