mat-sidenav-content content is being overflowed behind the pages scrollbar

Multi tool use
I am running Angular 7 with Bootstrap and I am trying to setup mat-sidenav-container
The issue I am facing is all the content inside mat-sidenav-content
(which is the main content for the page) is overflowing behind the browsers scrollbar for the content.
I have messed around with changing the overflow on this to no avail. I know adding a margin will probably fix it but I feel that it's messy cause some pages don't have a scroll bar.
Is this something to do with bootstrap being used as I am using this example
https://stackblitz.com/angular/klqaabgjllb?file=app%2Fsidenav-responsive-example.ts
angular angular-cli angular7 angular-bootstrap
add a comment |
I am running Angular 7 with Bootstrap and I am trying to setup mat-sidenav-container
The issue I am facing is all the content inside mat-sidenav-content
(which is the main content for the page) is overflowing behind the browsers scrollbar for the content.
I have messed around with changing the overflow on this to no avail. I know adding a margin will probably fix it but I feel that it's messy cause some pages don't have a scroll bar.
Is this something to do with bootstrap being used as I am using this example
https://stackblitz.com/angular/klqaabgjllb?file=app%2Fsidenav-responsive-example.ts
angular angular-cli angular7 angular-bootstrap
add a comment |
I am running Angular 7 with Bootstrap and I am trying to setup mat-sidenav-container
The issue I am facing is all the content inside mat-sidenav-content
(which is the main content for the page) is overflowing behind the browsers scrollbar for the content.
I have messed around with changing the overflow on this to no avail. I know adding a margin will probably fix it but I feel that it's messy cause some pages don't have a scroll bar.
Is this something to do with bootstrap being used as I am using this example
https://stackblitz.com/angular/klqaabgjllb?file=app%2Fsidenav-responsive-example.ts
angular angular-cli angular7 angular-bootstrap
I am running Angular 7 with Bootstrap and I am trying to setup mat-sidenav-container
The issue I am facing is all the content inside mat-sidenav-content
(which is the main content for the page) is overflowing behind the browsers scrollbar for the content.
I have messed around with changing the overflow on this to no avail. I know adding a margin will probably fix it but I feel that it's messy cause some pages don't have a scroll bar.
Is this something to do with bootstrap being used as I am using this example
https://stackblitz.com/angular/klqaabgjllb?file=app%2Fsidenav-responsive-example.ts
angular angular-cli angular7 angular-bootstrap
angular angular-cli angular7 angular-bootstrap
edited Jan 1 at 13:35
Jayden
asked Jan 1 at 12:18
JaydenJayden
658
658
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Add an autosize
attribute to your mat-sidenav-container
. It helps with recomputing margins & stuff with Angular material drawers.
It has a cost in terms of performance though, so you might want to put a timer to disable it a few seconds after the animation is done if it's important for you.
This did not work.
– Jayden
Jan 1 at 13:34
add a comment |
Removing position: absolute;
from the css of the page container outside of the mat-sidenav
fixed this one for me and pushed the scrollbar outside of it.
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%2f53995369%2fmat-sidenav-content-content-is-being-overflowed-behind-the-pages-scrollbar%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Add an autosize
attribute to your mat-sidenav-container
. It helps with recomputing margins & stuff with Angular material drawers.
It has a cost in terms of performance though, so you might want to put a timer to disable it a few seconds after the animation is done if it's important for you.
This did not work.
– Jayden
Jan 1 at 13:34
add a comment |
Add an autosize
attribute to your mat-sidenav-container
. It helps with recomputing margins & stuff with Angular material drawers.
It has a cost in terms of performance though, so you might want to put a timer to disable it a few seconds after the animation is done if it's important for you.
This did not work.
– Jayden
Jan 1 at 13:34
add a comment |
Add an autosize
attribute to your mat-sidenav-container
. It helps with recomputing margins & stuff with Angular material drawers.
It has a cost in terms of performance though, so you might want to put a timer to disable it a few seconds after the animation is done if it's important for you.
Add an autosize
attribute to your mat-sidenav-container
. It helps with recomputing margins & stuff with Angular material drawers.
It has a cost in terms of performance though, so you might want to put a timer to disable it a few seconds after the animation is done if it's important for you.
answered Jan 1 at 13:27


MicMic
2,41411634
2,41411634
This did not work.
– Jayden
Jan 1 at 13:34
add a comment |
This did not work.
– Jayden
Jan 1 at 13:34
This did not work.
– Jayden
Jan 1 at 13:34
This did not work.
– Jayden
Jan 1 at 13:34
add a comment |
Removing position: absolute;
from the css of the page container outside of the mat-sidenav
fixed this one for me and pushed the scrollbar outside of it.
add a comment |
Removing position: absolute;
from the css of the page container outside of the mat-sidenav
fixed this one for me and pushed the scrollbar outside of it.
add a comment |
Removing position: absolute;
from the css of the page container outside of the mat-sidenav
fixed this one for me and pushed the scrollbar outside of it.
Removing position: absolute;
from the css of the page container outside of the mat-sidenav
fixed this one for me and pushed the scrollbar outside of it.
answered Jan 1 at 13:40
JaydenJayden
658
658
add a comment |
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.
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%2f53995369%2fmat-sidenav-content-content-is-being-overflowed-behind-the-pages-scrollbar%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
8pS,RNzmJEmu6q1Dc4t95HR8d74EmR1,C6B8VCo,05jtMLK8yUlc 5n,6,PqRZi