AngularJS Scrolling Issue

Question

I have a Container that loads multiple views

<md-content flex id="content">
     <div ng-view></div>
</md-content>

For Example one of those views loaded looks like this

<div layout="column" id="selection-whiteframe" ng-controller="MathCtrl">
    [Header Row Here]
    <md-content id="MathContent">
        [SomeContent]
    </md-content>
</div>

The Problem is, that if there is too much Content in "MathContent", the NG-View Div becomes Scrollable and not the "MathContent" Md-Content whats not wanted because the [Header Row] should have a fixed position.

Is it somehow possible to prohibit an Element (for example the ng-view) from beeing scrollable or can I lock the Maximum Size of selection-whiteframe to the height of the ng-view?

you can do this via the css property "overflow" – Patrick Kelleter Mar 04 '16 at 10:09 — Patrick Kelleter, Mar 04 '16 at 10:09
Can you make a plunker for that? – Amit Sirohiya Mar 04 '16 at 10:13 — Amit Sirohiya, Mar 04 '16 at 10:13

score 1 · Accepted Answer · edited May 23 '17 at 11:45

This is a bit tricky, to make it work in Chrome you just need to add layout="column/row" on every level.

<body layout="column">
    <md-content layout="column" flex id="content">
        <div layout="column" ng-view>
            <div layout="column" id="selection-whiteframe" ng-controller="MathCtrl">
                [Header Row Here]
                <md-content layout="column"  id="MathContent">
                   [SomeContent]
                </md-content>
            </div>
        </div>
    </md-content>

But this will not work in Firefox. To make it work everywhere, you need to also replace all the div's with md-content.

<body layout="column">
    <md-content layout="column" flex id="content">
        <md-content layout="column" ng-view>
            <md-content layout="column" id="selection-whiteframe" ng-controller="MathCtrl">
                [Header Row Here]
                <md-content layout="column"  id="MathContent">
                   [SomeContent]
                </md-content>
            </md-content>
        </md-content>
    </md-content>

Here is a simple codepen and I refer you to my answer here: https://stackoverflow.com/a/29516060/2553215

http://codepen.io/kuhnroyal/pen/GZoRwz

AngularJS Scrolling Issue

1 Answers1