正文

将 ag-grid 与 flexbox 一起使用

 2023-03-28  70

关键词：

【中文标题】将 ag-grid 与 flexbox 一起使用【英文标题】：Using ag-grid with flexbox 【发布时间】：2019-04-07 22:23:57 【问题描述】：

我一直在尝试将 ag-grid 与 flex 布局一起使用，但它似乎没有按预期工作。

以下 stackblitz 有一个可重现的示例： https://stackblitz.com/edit/angular-zwpdhl

我的 ag-grid 位于具有列 flex 布局的父级下方，而父级本身位于 mat-sidenav-content 下方。我的期望是 ag-grid 取 flex 列中剩余的高度，如果网格数据太大，那么网格会得到一个垂直滚动条。然而，发生的事情是网格折叠成一条没有高度的水平线。我尝试将网格位置设置为绝对位置，（上、左、右、下）的值为 0，但这会破坏 flex 列，因为网格现在与列中的其他元素重叠。唯一的解决方法似乎是为网格设置一个固定的高度，但这违背了 flex 布局的意义。

以前有人遇到过这个问题吗？任何想法如何让它与 flex 布局一起正常工作？

【问题讨论】：

【参考方案1】：

您的问题是 mat-sidenav-content 内的额外 div - 没有它，网格只会呈现 fine：

<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 具有所需的整列高度，但它本身不是 flex 容器 - 这意味着 <div fxLayout="column" fxLayoutGap="5px"> 被布置为普通块元素，其高度由内容定义。 ag-grid-angular 元素的定义高度为 100%，并且作为 flex 列容器的子元素，causes some problems。只需删除这个额外的 div，网格元素上的 100% 高度就可以工作，因为mat-sidenav-content 已经定义了高度。

【讨论】：

感谢您的回答。我似乎也解决了这个问题，只需将 mat-sidenav-content 内额外 div 的高度设置为 100%。示例更新于stackblitz.com/edit/angular-7nabov

有没有办法使用 flexbox 语法将 div 堆叠在一起？

】有没有办法使用flexbox语法将div堆叠在一起？【英文标题】：Isthereawaytostackdivsontopofeachotherusingflexboxsyntax?【发布时间】：2014-12-3117:26:48【问题描述】：弹性盒问题。希望有人可以提供帮助:)我正在尝试构建一副由div组成的卡片组... 查看详情

如何将 flexbox 与锚定列一起使用

】如何将flexbox与锚定列一起使用【英文标题】：Howtouseflexboxwithanchoredcolumns【发布时间】：2016-04-1009:44:07【问题描述】：我使用display:flex是为了让孩子的列具有相同的高度。当col-...是display:flex父级的直接子级时，一切正常：<di... 查看详情

与 Angular 材质选项卡一起使用时，Ag-Grid Cell Render 无法正确显示按钮

】与Angular材质选项卡一起使用时，Ag-GridCellRender无法正确显示按钮【英文标题】：Ag-GridCellRenderdon\'tdisplaybuttonscorrectlywhenusedwithAngularmaterialtab【发布时间】：2021-03-0101:31:52【问题描述】：我刚开始在我的一个项目中使用ag-grid，我... 查看详情

是否可以在没有构建器的情况下将 ag-grid 与 vue 一起使用？

】是否可以在没有构建器的情况下将ag-grid与vue一起使用？【英文标题】：Isitpossibletouseag-gridwithvuewithoutabuilder?【发布时间】：2019-10-1313:08:32【问题描述】：特别是，ag-grid-vue组件的typescript源是否可以编译然后包含在常规html文件... 查看详情

如何将两个数据表内容的滚动同步在一起（ag-grid）

】如何将两个数据表内容的滚动同步在一起（ag-grid）【英文标题】：HowdoIsynchronizethescrolloftwodatatablecontentstogether(ag-grid)【发布时间】：2020-07-0904:53:27【问题描述】：我在Angular中使用ag-grid，我希望有两个数据表(ag-grid)一个在另一... 查看详情

将 Flex/CSS 与 wkhtmltopdf 一起使用

...【问题描述】：我已经在我的HTML页面Howtodisplay3itemsperrowinflexbox?上使用以下带有flexbox的答案成功创建了一个列表我需要使用这些数据创建一个PDF，我正在使用wkhtmltopdf(https://wkhtmltopdf.o 查看详情

与 ember.js 中的模态叠加一起使用时，ag-grid 调整列的大小需要很长时间才能响应

】与ember.js中的模态叠加一起使用时，ag-grid调整列的大小需要很长时间才能响应【英文标题】：ag-gridresizingcolumnstakingtoolongtorespondwhenusedwithanmodaloverlayinember.js【发布时间】：2020-05-0401:35:01【问题描述】：我们在使用带有模态覆盖... 查看详情

有没有办法让 flexbox 与 Django 一起工作？

】有没有办法让flexbox与Django一起工作？【英文标题】：IsthereawaytogetflexboxtoworkwithDjango?【发布时间】：2020-03-0919:58:44【问题描述】：我已经导入了最新的bootstrap样式表并将它们放在我的homepage.html文件中，但是，当尝试使用css并实... 查看详情

使用 flexbox 将元素与底部对齐

】使用flexbox将元素与底部对齐【英文标题】：Alignanelementtobottomwithflexbox【发布时间】：2015-09-0903:22:01【问题描述】：我有一个div和一些孩子：<divclass="content"><h1>heading1</h1><h2>heading2</h2><p>Somemoreorlesstext&l... 查看详情

无法将 div 中的纯文本与文本溢出一起垂直对齐：省略号

...【发布时间】：2019-10-2902:22:54【问题描述】：我正在使用ag-grid，当我无法将div中的纯文本与text-overflow:ellipsis垂直对齐时，我遇到了问题。可以选择使用flexboxalign 查看详情

将一个项目居中对齐，其他项目与 Flexbox 对齐 [重复]

】将一个项目居中对齐，其他项目与Flexbox对齐[重复]【英文标题】：AlignanitemincenterandotherinrightwithFlexbox[duplicate]【发布时间】：2015-10-2623:13:27【问题描述】：我想使用flexbox将一个项目居中对齐，其他项目居右对齐，如下例所示。... 查看详情

带有反应的ag-grid中的可点击url值

】带有反应的ag-grid中的可点击url值【英文标题】：Clickableurlvalueinag-gridwithreact【发布时间】：2017-12-2609:02:01【问题描述】：我目前正在尝试ag-grid并尝试构建一个表格，如果用户单击列值，他们将被带到包含该条目详细信息的页... 查看详情

ag-gridsort不能与另一个第三方插件一起使用(代码片段)

ag-gridsort不能与另一个第三方插件一起使用。Stimulsoftreport.js用于报告工具。pleasefindplunkrlinkforthesame.<html><head><scriptsrc="https://unpkg.com/ag-grid@13.3.1/dist/ag-grid.js"></script><scrip 查看详情

AG-Grid 与 Redux

】AG-Grid与Redux【英文标题】：AG-GridwithRedux【发布时间】：2016-11-2600:25:01【问题描述】：在我的工作中，我们决定在反应变体中使用AG-Grid：https://www.ag-grid.com/best-react-data-grid/index.php目前，React的架构是Redux。根据我对AG-Grid的了解... 查看详情

Bootstrap 4 Flexbox - 将多列与对齐项目中心对齐

】Bootstrap4Flexbox-将多列与对齐项目中心对齐【英文标题】：Bootstrap4Flexbox-Alignmultiplecolumnswithalignitemscenter【发布时间】：2020-09-1713:11:05【问题描述】：我有3列试图垂直居中于视口。列必须是全宽-没有内联。我希望它们像在代码层... 查看详情

在 Safari 中使用 flexbox 进行绝对定位

】在Safari中使用flexbox进行绝对定位【英文标题】：AbsolutelypositioningwithflexboxinSafari【发布时间】：2017-10-0210:44:06【问题描述】：SafarihasfullsupportforFlexBoxaccordingtocaniuse.我只是想使用flexbox将一些不同大小的div堆叠在一起。我真的很... 查看详情

scrollreveal.js 和 flexbox

】scrollreveal.js和flexbox【英文标题】：scrollreveal.jsandflexbox【发布时间】：2018-06-1803:01:03【问题描述】：我在将scrollreveal.js与flexbox一起使用时遇到问题。我使用displayflex在页面上创建了几个两列行，当尝试使用scrollreveal引用分别显... 查看详情

使用 CSS 网格和 flexbox 定位图像

】使用CSS网格和flexbox定位图像【英文标题】：ImagepositioningwithCSSgridandflexbox【发布时间】：2020-10-2204:38:42【问题描述】：whatmyimagegalleryislikeatthemoment如您所见，我在网格系统中有2张图像占据了50%的宽度。我遇到的问题是我想让下... 查看详情