I am using a Customer Ag Grid Cell Render to show dropdown in ag grid. It is found the last row cannot show the full dropdown while the first row can show the full dropdown.
The class .ag-cell have dropdown list visible within the cell/row. But It seems that the grid have style of 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
