Angular Material Layout - How to create scrollable sections

Question

I would like to use only material directives as much as possible instead of introducing some raw CSS stuff.

I try to build a layout for one-page application that takes up the whole view port. This is a rough sketch of the layout:

+-------------------------------+
| Toolbar                       |
|----------+--------------------|
| Nav-Bar  | +----------------+ |
| +------+ | |                | |
| | List | | |                | |
| |      | | | un-scrollable  | |
| |      | | |     content    | |
| +------+ | | (fills         | |
| +------+ | | available area)| |
| | List | | |                | |
| |      | | |                | |
| +------+ | +----------------+ |
+----------+--------------------+

The navigation bar should remain with fixed height, and the lists should be scrollable.

The different sections are components implemented as angular directives (and templates). One of the issues is that composing the app in this way seems to break the layout css set by material's directives for me.

Any help will be greatly appreciated.

<md-content> creates scrollable sections, but it seems like you're fishing for someone to do this for you.... — audiodude
I know about md-content. Read the docs, but as I have mentioned, I have problems when you try to combine it with user tag directives. After half a day on this, I prefere asking for help. Thank you. — Sagi

Sagi Sagi · Accepted Answer · 2016-01-05T12:53:43

I managed eventually to solve this using this workaround. It seems that md-content has issues with being stretched vertically in a column layout.

Another important point to notice is to make sure to define a layout on all the elements in the relevant hierarchy starting from body.

Hope this helps someone else too.

Angular Material Layout - How to create scrollable sections

1 Answers