[英]Way to make ag-grid take 100% page height in angular
I'm trying to make angular ag-grid
to take the full height of a web page, so if I have some components like text or title for ag-grid
I want to make the displayed grid to take the full height of the page.我正在尝试使角度ag-grid
占据网页的全高,所以如果我有一些组件,如ag-grid
文本或标题,我想让显示的网格占据页面的全高。
I've looked at this question on stack overflow:我看过关于堆栈溢出的这个问题:
How can I make my flexbox layout take 100% vertical space? 如何让我的 flexbox 布局占据 100% 的垂直空间?
And then I'm trying to apply this for angular ag-grid
grid然后我尝试将其应用于角度ag-grid
网格
Here is the css I applied, but it is not giving the desired result:这是我应用的 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;
}
Here is the link to Stackblitz for a demo:这是 Stackblitz 的演示链接:
https://stackblitz.com/edit/ag-grid-bss-test-kgpfxz?file=styles.css https://stackblitz.com/edit/ag-grid-bss-test-kgpfxz?file=styles.css
I've surrounded the grid with a div using a class .container
to be able to apply the display: flex
CSS, but this is not helpfull.我已经使用类.container
用 div 包围了网格,以便能够应用display: flex
CSS,但这没有帮助。 Is there a way to make the height of the grid to take the full height of the page ?有没有办法让网格的高度占据页面的整个高度?
If I remove the inline style:如果我删除内联样式:
style="width: 100%; height: 600px"
for ag-grid-angular
, I'm able to see only one row in it.对于ag-grid-angular
,我只能看到其中的一行。
You need to make few changes in your styles.css
after removing inline styling of the ag-grid-angular
in your template.删除模板中ag-grid-angular
内联样式后,您需要对styles.css
进行一些更改。
Have a look at this Stackblitz demo看看这个Stackblitz 演示
Specifically, you need to make heights of the ag-grid-angular
element (not just class) and parent containers of it.具体来说,您需要制作ag-grid-angular
元素(不仅仅是类)及其父容器的高度。
my-app, my-app .container {
display: flex;
flex-direction: column;
height: 100%;
}
ag-grid-angular{
height: 100%;
}
For anyone who had this problem, in ag grid 23 + and Angular 9+ all that matters is that the parent containers height will be set properly, no need to set ag-grid-angular
or anything in the global style.对于遇到此问题的任何人,在 ag grid 23 + 和 Angular 9+ 中,重要的是父容器的高度将被正确设置,无需设置ag-grid-angular
或全局样式中的任何内容。
For me the problem was that I was using ag grid inside mat tab group which didn't have 100%.对我来说,问题是我在没有 100% 的 mat tab 组中使用了 ag 网格。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.