使 ag-grid 在 angular 中占据 100% 页面高度的方法
Way to make ag-grid take 100% page height in angular
我正在尝试让 angular ag-grid
占据网页的整个高度,所以如果我有一些组件,例如 ag-grid
的文本或标题,我想使显示的网格占据页面的整个高度。
我看过关于堆栈溢出的这个问题:
How can I make my flexbox layout take 100% vertical space?
然后我尝试将其应用于 angular ag-grid
网格
这是我申请的css,但没有给出预期的结果:
body, html {
height: 100%;
margin:2px;
}
my-app .container {
display: flex;
flex-direction: column;
}
my-app .container .ag-grid-angular {
flex-basis: 100%;
display: flex;
flex-grow: 1;
}
这是 link 到 Stackblitz 的演示:
https://stackblitz.com/edit/ag-grid-bss-test-kgpfxz?file=styles.css
我使用 class .container
用 div 包围了网格,以便能够应用 display: flex
CSS,但这是没有帮助。有没有办法让网格的高度占据页面的全高?
如果我删除内联样式:
style="width: 100%; height: 600px"
对于 ag-grid-angular
,我只能看到其中的一行。
删除模板中 ag-grid-angular
的内联样式后,您需要对 styles.css
做一些更改。
看看这个Stackblitz demo
具体来说,您需要制作 ag-grid-angular
元素(不仅仅是 class)及其父容器的高度。
my-app, my-app .container {
display: flex;
flex-direction: column;
height: 100%;
}
ag-grid-angular{
height: 100%;
}
对于遇到此问题的任何人,在 ag grid 23 + 和 Angular 9+ 中,重要的是父容器高度将正确设置,无需设置 ag-grid-angular
或任何其他内容在全局样式中。
对我来说,问题是我在没有 100% 的 mat 选项卡组中使用 ag 网格。
我正在尝试让 angular ag-grid
占据网页的整个高度,所以如果我有一些组件,例如 ag-grid
的文本或标题,我想使显示的网格占据页面的整个高度。
我看过关于堆栈溢出的这个问题:
How can I make my flexbox layout take 100% vertical space?
然后我尝试将其应用于 angular ag-grid
网格
这是我申请的css,但没有给出预期的结果:
body, html {
height: 100%;
margin:2px;
}
my-app .container {
display: flex;
flex-direction: column;
}
my-app .container .ag-grid-angular {
flex-basis: 100%;
display: flex;
flex-grow: 1;
}
这是 link 到 Stackblitz 的演示:
https://stackblitz.com/edit/ag-grid-bss-test-kgpfxz?file=styles.css
我使用 class .container
用 div 包围了网格,以便能够应用 display: flex
CSS,但这是没有帮助。有没有办法让网格的高度占据页面的全高?
如果我删除内联样式:
style="width: 100%; height: 600px"
对于 ag-grid-angular
,我只能看到其中的一行。
删除模板中 ag-grid-angular
的内联样式后,您需要对 styles.css
做一些更改。
看看这个Stackblitz demo
具体来说,您需要制作 ag-grid-angular
元素(不仅仅是 class)及其父容器的高度。
my-app, my-app .container {
display: flex;
flex-direction: column;
height: 100%;
}
ag-grid-angular{
height: 100%;
}
对于遇到此问题的任何人,在 ag grid 23 + 和 Angular 9+ 中,重要的是父容器高度将正确设置,无需设置 ag-grid-angular
或任何其他内容在全局样式中。
对我来说,问题是我在没有 100% 的 mat 选项卡组中使用 ag 网格。