CODEWITHSUNDEEP
cssangularangular-material
Matt Raible
Matt Raible

Reputation: 8614

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

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

Upvotes: 0

Views: 3616

Answers (2)

Faiz Shahid
Faiz Shahid

Reputation: 325

You can fixed this by adding min-height: 100% in your .content class

Upvotes: 0

Hitech Hitesh
Hitech Hitesh

Reputation: 1635

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

Upvotes: 1

Related Questions