如何使用 Angular 6 -Ag 网格并排显示两个网格 [英] How to display two grids side by side using Angular 6 -Ag grid

问题描述

我试图并排放置两个网格，但第二个网格会自动移到下一行.

我已将每个网格的宽度减少到 40%，并且还尝试将网格放置在 中，但我仍然无法显示彼此并排的网格.

解决方案

使用 flexbox 应该可以解决您的问题:

.row {显示:弹性；}.柱子 {弹性:50%；填充:10px；高度:500px；}<div class="row"><div class="column"><ag-grid-angular [gridOptions]="firstGrid" class="ag-theme-balham"></ag-grid-angular>

<div class="column"><ag-grid-angular [gridOptions]="secondGrid" class="ag-theme-balham"></ag-grid-angular>

I am trying to place two grids side by side ,but the second grid is automatically shifted to the next line.

I have reduced the width of the grids to 40% each ,and also tried to place the grids in <span> ,But still I am not able to display the grids beside each other.

解决方案

Using flexbox should solve your problem:

.row {
  display: flex;
}

.column {
  flex: 50%;
  padding: 10px;
  height: 500px;
}

<div class="row">
  <div class="column">
    <ag-grid-angular [gridOptions]="firstGrid" class="ag-theme-balham"></ag-grid-angular>
  </div>
  <div class="column">
    <ag-grid-angular [gridOptions]="secondGrid" class="ag-theme-balham"></ag-grid-angular>
  </div>
</div>

这篇关于如何使用 Angular 6 -Ag 网格并排显示两个网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！