How to make dynamic height with Angular Material and responsive sidebar?

Issue

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:

welcome screen

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.

list

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.

content-auto

The screen with the list looks a lot better though and you can scroll to see all its contents.

list-auto

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

Solution

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)

This Answer collected from stackoverflow and tested by AngularFixing community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

Your email address will not be published.