I followed this guide to create a responsive sidebar menu with Angular Material. Now I’m trying to make the content part of the screen render correctly with dynamic data. The content looks fine when rendering a static page. For example, here’s the welcome page:
However, when I have a list screen with dynamic data, I can’t scroll up to see the entire list. The list goes above the content section and overflows below it too.
I can fix this by changing the
.content class from using
height: calc(100vh - 98px) to
height: auto, but then it causes regular screens to look funny because the content part doesn’t flow to the bottom.
The screen with the list looks a lot better though and you can scroll to see all its contents.
Is it possible to 1) make it so the height is dynamic and stretches to the bottom while allowing scroll-ability? Also, how do I make the static content render at the top instead of the vertical center?
You can see this issue in action by cloning this repo and running its Angular Material example:
git clone -b styles-support https://github.com/manfredsteyer/angular-crud.git cd demo-material npm install npm start
You can set a minimum height of the content div like this
min-height: calc(100vh - 98px); height:auto;
This way and height to auto so it will expand and look proper
Answered By – Hitech Hitesh
Answer Checked By – Terry (AngularFixing Volunteer)