Material flex layout - one grid overlaps over other when it is small screen
Created this stackblitz.
When it is in desktop and full screen the output loks good, but when the browser windows size is small, then one grid is overlapping over the other grid.
I want the grids to be 100% height so I can put my contents inside them and when the screen is small one grid should take the entire screen, i.e not more or less then the entire screen height minus the top navbar.
Not sure, but may be because of below css code. But if I remove these css code, I am not getting full screen grids. that means it looks like below
CSS:
.mat-drawer-content {
position: absolute !important;
}
.mat-grid-list {
height: 100%;
}
.mat-grid-list {
position: initial !important;
}
css angular css3 flexbox angular-material
edited Nov 20 at 20:23
Michael_B
144k47229338
asked Nov 20 at 20:09
SK.
367216
add a comment |
Created this stackblitz.
When it is in desktop and full screen the output loks good, but when the browser windows size is small, then one grid is overlapping over the other grid.
I want the grids to be 100% height so I can put my contents inside them and when the screen is small one grid should take the entire screen, i.e not more or less then the entire screen height minus the top navbar.
Not sure, but may be because of below css code. But if I remove these css code, I am not getting full screen grids. that means it looks like below
CSS:
.mat-drawer-content {
position: absolute !important;
}
.mat-grid-list {
height: 100%;
}
.mat-grid-list {
position: initial !important;
}
css angular css3 flexbox angular-material
edited Nov 20 at 20:23
Michael_B
144k47229338
asked Nov 20 at 20:09
SK.
367216
Does this question deserve -ve vote ? If yes, kindly let me know how I can improve? If No, kindly upvote this. As you know after a certain amount of -ve votes, one can't ask questions any more in this forum... so please...
– SK.
Nov 21 at 13:58
Not sure who or why the downvote - this is a perfectly fine question. I upvoted to "offset" the downvote :).
– G. Tranter
Nov 21 at 15:40
add a comment |
Created this stackblitz.
When it is in desktop and full screen the output loks good, but when the browser windows size is small, then one grid is overlapping over the other grid.
I want the grids to be 100% height so I can put my contents inside them and when the screen is small one grid should take the entire screen, i.e not more or less then the entire screen height minus the top navbar.
Not sure, but may be because of below css code. But if I remove these css code, I am not getting full screen grids. that means it looks like below
CSS:
.mat-drawer-content {
position: absolute !important;
}
.mat-grid-list {
height: 100%;
}
.mat-grid-list {
position: initial !important;
}
css angular css3 flexbox angular-material
edited Nov 20 at 20:23
Michael_B
144k47229338
asked Nov 20 at 20:09
SK.
367216
Created this stackblitz.
When it is in desktop and full screen the output loks good, but when the browser windows size is small, then one grid is overlapping over the other grid.
I want the grids to be 100% height so I can put my contents inside them and when the screen is small one grid should take the entire screen, i.e not more or less then the entire screen height minus the top navbar.
Not sure, but may be because of below css code. But if I remove these css code, I am not getting full screen grids. that means it looks like below
CSS:
.mat-drawer-content {
position: absolute !important;
}
.mat-grid-list {
height: 100%;
}
.mat-grid-list {
position: initial !important;
}
css angular css3 flexbox angular-material
css angular css3 flexbox angular-material
edited Nov 20 at 20:23
Michael_B
144k47229338
asked Nov 20 at 20:09
SK.
367216
edited Nov 20 at 20:23
Michael_B
144k47229338
asked Nov 20 at 20:09
SK.
367216
edited Nov 20 at 20:23
Michael_B
144k47229338
edited Nov 20 at 20:23
Michael_B
144k47229338
edited Nov 20 at 20:23
Michael_B
144k47229338
144k47229338
asked Nov 20 at 20:09
SK.
367216
asked Nov 20 at 20:09
SK.
367216
asked Nov 20 at 20:09
SK.
367216
367216
Does this question deserve -ve vote ? If yes, kindly let me know how I can improve? If No, kindly upvote this. As you know after a certain amount of -ve votes, one can't ask questions any more in this forum... so please...
– SK.
Nov 21 at 13:58
Not sure who or why the downvote - this is a perfectly fine question. I upvoted to "offset" the downvote :).
– G. Tranter
Nov 21 at 15:40
add a comment |
Does this question deserve -ve vote ? If yes, kindly let me know how I can improve? If No, kindly upvote this. As you know after a certain amount of -ve votes, one can't ask questions any more in this forum... so please...
– SK.
Nov 21 at 13:58
Not sure who or why the downvote - this is a perfectly fine question. I upvoted to "offset" the downvote :).
– G. Tranter
Nov 21 at 15:40
Does this question deserve -ve vote ? If yes, kindly let me know how I can improve? If No, kindly upvote this. As you know after a certain amount of -ve votes, one can't ask questions any more in this forum... so please...
– SK.
Nov 21 at 13:58
Does this question deserve -ve vote ? If yes, kindly let me know how I can improve? If No, kindly upvote this. As you know after a certain amount of -ve votes, one can't ask questions any more in this forum... so please...
– SK.
Nov 21 at 13:58
Not sure who or why the downvote - this is a perfectly fine question. I upvoted to "offset" the downvote :).
– G. Tranter
Nov 21 at 15:40
Not sure who or why the downvote - this is a perfectly fine question. I upvoted to "offset" the downvote :).
– G. Tranter
Nov 21 at 15:40
add a comment |
1 Answer
1
active
oldest
votes
IME it is very tricky - maybe impossible - to get around MatGrid's own layout mechanism and force it to behave a certain way using CSS or flex-layout, because the component is designed to be dynamically layed out using calculations. You've done it the right way with cols but you need to apply the same idea to rowHeight. Something like:
<mat-grid-list [cols]="breakpoint" [rowHeight]="ratio" (window:resize)="onResize($event)">
...
breakpoint: number;
ratio: string;
constructor(private el: ElementRef) { }
ngOnInit() {
this.resize(window.innerWidth);
}
onResize(event) {
this.resize(event.target.innerWidth);
}
resize(width: number) {
if (width <= 400) {
this.breakpoint = 1;
this.ratio = this.el.nativeElement.offsetWidth + ':' + this.el.nativeElement.offsetHeight / 4;
} else {
this.breakpoint = 4;
this.ratio = this.el.nativeElement.offsetWidth / 4 + ':' + this.el.nativeElement.offsetHeight;
}
}
Note that you will also need to apply some sort of fixed height to the grid - perhaps via the parent container of the grid (in your case demo-component) and cause the grid to take the height of it's parent:
:host {
height: 300px !important;
align-self: stretch;
flex: 1 0 100%;
display: flex;
justify-content: stretch;
align-items: stretch;
}
.mat-grid-list {
flex: 1 1 100%;
}
This isn't completely perfect, but it's much better. Here it is on StackBlitz.
answered Nov 20 at 22:23
G. Tranter
4,0711223
Thanks Tranter, that gave a heads up. I changed your code a little bit and I am very close to what I am expecting. I created a global.ts where I keep the navbar height and then I get the window height and then I diduct navbar height. this.rowHeight = (window.innerHeight - (Globals.NAV_BAR_HEIGHT+20)) + '';
– SK.
Nov 21 at 15:52
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400783%2fmaterial-flex-layout-one-grid-overlaps-over-other-when-it-is-small-screen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
IME it is very tricky - maybe impossible - to get around MatGrid's own layout mechanism and force it to behave a certain way using CSS or flex-layout, because the component is designed to be dynamically layed out using calculations. You've done it the right way with cols but you need to apply the same idea to rowHeight. Something like:
<mat-grid-list [cols]="breakpoint" [rowHeight]="ratio" (window:resize)="onResize($event)">
...
breakpoint: number;
ratio: string;
constructor(private el: ElementRef) { }
ngOnInit() {
this.resize(window.innerWidth);
}
onResize(event) {
this.resize(event.target.innerWidth);
}
resize(width: number) {
if (width <= 400) {
this.breakpoint = 1;
this.ratio = this.el.nativeElement.offsetWidth + ':' + this.el.nativeElement.offsetHeight / 4;
} else {
this.breakpoint = 4;
this.ratio = this.el.nativeElement.offsetWidth / 4 + ':' + this.el.nativeElement.offsetHeight;
}
}
Note that you will also need to apply some sort of fixed height to the grid - perhaps via the parent container of the grid (in your case demo-component) and cause the grid to take the height of it's parent:
:host {
height: 300px !important;
align-self: stretch;
flex: 1 0 100%;
display: flex;
justify-content: stretch;
align-items: stretch;
}
.mat-grid-list {
flex: 1 1 100%;
}
This isn't completely perfect, but it's much better. Here it is on StackBlitz.
answered Nov 20 at 22:23
G. Tranter
4,0711223
Thanks Tranter, that gave a heads up. I changed your code a little bit and I am very close to what I am expecting. I created a global.ts where I keep the navbar height and then I get the window height and then I diduct navbar height. this.rowHeight = (window.innerHeight - (Globals.NAV_BAR_HEIGHT+20)) + '';
– SK.
Nov 21 at 15:52
add a comment |
IME it is very tricky - maybe impossible - to get around MatGrid's own layout mechanism and force it to behave a certain way using CSS or flex-layout, because the component is designed to be dynamically layed out using calculations. You've done it the right way with cols but you need to apply the same idea to rowHeight. Something like:
<mat-grid-list [cols]="breakpoint" [rowHeight]="ratio" (window:resize)="onResize($event)">
...
breakpoint: number;
ratio: string;
constructor(private el: ElementRef) { }
ngOnInit() {
this.resize(window.innerWidth);
}
onResize(event) {
this.resize(event.target.innerWidth);
}
resize(width: number) {
if (width <= 400) {
this.breakpoint = 1;
this.ratio = this.el.nativeElement.offsetWidth + ':' + this.el.nativeElement.offsetHeight / 4;
} else {
this.breakpoint = 4;
this.ratio = this.el.nativeElement.offsetWidth / 4 + ':' + this.el.nativeElement.offsetHeight;
}
}
Note that you will also need to apply some sort of fixed height to the grid - perhaps via the parent container of the grid (in your case demo-component) and cause the grid to take the height of it's parent:
:host {
height: 300px !important;
align-self: stretch;
flex: 1 0 100%;
display: flex;
justify-content: stretch;
align-items: stretch;
}
.mat-grid-list {
flex: 1 1 100%;
}
This isn't completely perfect, but it's much better. Here it is on StackBlitz.
answered Nov 20 at 22:23
G. Tranter
4,0711223
Thanks Tranter, that gave a heads up. I changed your code a little bit and I am very close to what I am expecting. I created a global.ts where I keep the navbar height and then I get the window height and then I diduct navbar height. this.rowHeight = (window.innerHeight - (Globals.NAV_BAR_HEIGHT+20)) + '';
– SK.
Nov 21 at 15:52
add a comment |
IME it is very tricky - maybe impossible - to get around MatGrid's own layout mechanism and force it to behave a certain way using CSS or flex-layout, because the component is designed to be dynamically layed out using calculations. You've done it the right way with cols but you need to apply the same idea to rowHeight. Something like:
<mat-grid-list [cols]="breakpoint" [rowHeight]="ratio" (window:resize)="onResize($event)">
...
breakpoint: number;
ratio: string;
constructor(private el: ElementRef) { }
ngOnInit() {
this.resize(window.innerWidth);
}
onResize(event) {
this.resize(event.target.innerWidth);
}
resize(width: number) {
if (width <= 400) {
this.breakpoint = 1;
this.ratio = this.el.nativeElement.offsetWidth + ':' + this.el.nativeElement.offsetHeight / 4;
} else {
this.breakpoint = 4;
this.ratio = this.el.nativeElement.offsetWidth / 4 + ':' + this.el.nativeElement.offsetHeight;
}
}
Note that you will also need to apply some sort of fixed height to the grid - perhaps via the parent container of the grid (in your case demo-component) and cause the grid to take the height of it's parent:
:host {
height: 300px !important;
align-self: stretch;
flex: 1 0 100%;
display: flex;
justify-content: stretch;
align-items: stretch;
}
.mat-grid-list {
flex: 1 1 100%;
}
This isn't completely perfect, but it's much better. Here it is on StackBlitz.
answered Nov 20 at 22:23
G. Tranter
4,0711223
IME it is very tricky - maybe impossible - to get around MatGrid's own layout mechanism and force it to behave a certain way using CSS or flex-layout, because the component is designed to be dynamically layed out using calculations. You've done it the right way with cols but you need to apply the same idea to rowHeight. Something like:
<mat-grid-list [cols]="breakpoint" [rowHeight]="ratio" (window:resize)="onResize($event)">
...
breakpoint: number;
ratio: string;
constructor(private el: ElementRef) { }
ngOnInit() {
this.resize(window.innerWidth);
}
onResize(event) {
this.resize(event.target.innerWidth);
}
resize(width: number) {
if (width <= 400) {
this.breakpoint = 1;
this.ratio = this.el.nativeElement.offsetWidth + ':' + this.el.nativeElement.offsetHeight / 4;
} else {
this.breakpoint = 4;
this.ratio = this.el.nativeElement.offsetWidth / 4 + ':' + this.el.nativeElement.offsetHeight;
}
}
Note that you will also need to apply some sort of fixed height to the grid - perhaps via the parent container of the grid (in your case demo-component) and cause the grid to take the height of it's parent:
:host {
height: 300px !important;
align-self: stretch;
flex: 1 0 100%;
display: flex;
justify-content: stretch;
align-items: stretch;
}
.mat-grid-list {
flex: 1 1 100%;
}
This isn't completely perfect, but it's much better. Here it is on StackBlitz.
answered Nov 20 at 22:23
G. Tranter
4,0711223
answered Nov 20 at 22:23
G. Tranter
4,0711223
answered Nov 20 at 22:23
G. Tranter
4,0711223
answered Nov 20 at 22:23
G. Tranter
4,0711223
4,0711223
Thanks Tranter, that gave a heads up. I changed your code a little bit and I am very close to what I am expecting. I created a global.ts where I keep the navbar height and then I get the window height and then I diduct navbar height. this.rowHeight = (window.innerHeight - (Globals.NAV_BAR_HEIGHT+20)) + '';
– SK.
Nov 21 at 15:52
add a comment |
Thanks Tranter, that gave a heads up. I changed your code a little bit and I am very close to what I am expecting. I created a global.ts where I keep the navbar height and then I get the window height and then I diduct navbar height. this.rowHeight = (window.innerHeight - (Globals.NAV_BAR_HEIGHT+20)) + '';
– SK.
Nov 21 at 15:52
Thanks Tranter, that gave a heads up. I changed your code a little bit and I am very close to what I am expecting. I created a global.ts where I keep the navbar height and then I get the window height and then I diduct navbar height. this.rowHeight = (window.innerHeight - (Globals.NAV_BAR_HEIGHT+20)) + '';
– SK.
Nov 21 at 15:52
Thanks Tranter, that gave a heads up. I changed your code a little bit and I am very close to what I am expecting. I created a global.ts where I keep the navbar height and then I get the window height and then I diduct navbar height. this.rowHeight = (window.innerHeight - (Globals.NAV_BAR_HEIGHT+20)) + '';
– SK.
Nov 21 at 15:52
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400783%2fmaterial-flex-layout-one-grid-overlaps-over-other-when-it-is-small-screen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Does this question deserve -ve vote ? If yes, kindly let me know how I can improve? If No, kindly upvote this. As you know after a certain amount of -ve votes, one can't ask questions any more in this forum... so please...
– SK.
Nov 21 at 13:58
Not sure who or why the downvote - this is a perfectly fine question. I upvoted to "offset" the downvote :).
– G. Tranter
Nov 21 at 15:40