How to Get Md-Content to Scroll Within a Form?
Below Is the Layout of a Screen in My Application. I Am Unable to Get the Md-Content to Scroll. Instead the Entire Page Scrolls. Any Suggestions? ` Header...
Below is the layout of a screen in my application. I am unable to get the md-content to scroll. Instead the entire page scrolls. Any suggestions?
`
<form name="myForm">
<!-- Header Area-->
<div>
<label>Header</label>
<md-button type="submit" ng-disabled="myForm.$invalid">Submit</md-button>
</div>
<!-- Content Area-->
<md-content>
<!-- Form fields-->
</md-content>
</form>
`
I tried setting the form's overflow to hidden and explicitly setting the md-content's overflow to auto but that doesn't help.
Below is the plunker i created which demonstrates the entire page scrolling instead of md-content.
2 Answers
Changing your form element to: <form name="myForm" flex layout="column" style="overflow: auto; height: 100%;">
seems to do the trick.
Mike Feltman's solution works, but all that you really need is to apply layout attribute (layout="column" in your case) to your form.
Check this one: