Использование ag-grid с flexbox

Question

Я пытался использовать ag-grid с гибкой разметкой, однако она не работает должным образом.

У следующего стекаблица есть воспроизводимый пример: https://stackblitz.com/edit/angular-zwpdhl

У меня есть ag-grid, расположенный под родителем с гибким макетом столбца, а сам родитель находится под mat-sidenav-content. Я ожидаю, что ag-grid берет оставшуюся высоту в столбце flex, и если данные сетки слишком велики, то сетка получает вертикальную полосу прокрутки. Однако, что происходит, так это то, что сетка падает на горизонтальную линию без высоты. Я попытался установить абсолютную позицию сетки со значением 0 для (сверху, слева, справа, снизу), но это нарушает гибкую колонку, потому что сетка теперь перекрывает другие элементы в колонке. Единственный обходной путь, кажется, устанавливает фиксированную высоту сетки, но это побеждает точку гибкого макета.

Кто-нибудь сталкивался с этой проблемой раньше? Какие-нибудь идеи, как заставить это работать правильно с гибким расположением?

Answer 1

Ваша проблема в дополнительном div внутри mat-sidenav-content - без него сетка отображает только отлично :

<mat-sidenav-content fxLayout="column" fxLayoutGap="5px" fxFlex>
    <div>Toolbar</div>
    <ag-grid-angular class="ag-theme-balham" style="height: 100%; width: 100%;" [rowData]="rowData" [columnDefs]="columnDefs">
    </ag-grid-angular>
</mat-sidenav-content>

вместо

<mat-sidenav-content>
  <div fxLayout="column" fxLayoutGap="5px">
     <div>Toolbar</div>
     <ag-grid-angular class="ag-theme-balham" style="height: 100%; width: 100%;" [rowData]="rowData" [columnDefs]="columnDefs">
       </ag-grid-angular>
  </div>
</mat-sidenav-content>

Объяснение: mat-sidenav-content имеет желаемую высоту всего столбца, но не является гибким контейнером - это означает, что <div fxLayout="column" fxLayoutGap="5px"> представляет собой обычный элемент блока, высота которого определяется содержимым. Элемент ag-grid-angular имеет определенную высоту 100% и как дочерний элемент контейнера гибкого столбца, что вызывает некоторые проблемы . При удалении этого дополнительного элемента div высота 100% для элемента сетки работает, потому что mat-sidenav-content уже имеет определенную высоту.