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?

`

<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.

1

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:

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Robert Thorne

Robert Thorne

Automotive & Future Transportation Editor

Robert Thorne covers electric vehicle innovations, autonomous driving systems, global mobility trends, and automotive engineering developments.

Share this article
Twitter Facebook Pinterest