Vue-material: md-dialog-content with large form does not scroll

[dohomi]

Steps to reproduce

Open "Form Dialog" and try to scroll down inside md-dialog-content or click the md-button

Which browser?

VueJS latest, vue-material latest, Chrome latest on Mac OSX

What is expected?

The md-dialog-actions should be visible by all times. The md-dialog-content should shrink down and be scrollable inside the view.

What is actually happening?

The dialog is not showing the actions toolbar on the bottom and the other input fields are not able to be seen. The dialog container is showing the correct size, missing is an overflow:auto on md-dialog-content respecting the height of the dialog elements

Reproduction Link

http://codepen.io/anon/pen/PWRJZG

[korylprince]

@dohomi it's actually explicitly set to overflow: hidden. Looking at the commits, it's been that way since mdDialog was added. Changing it to overflow: auto seems to work without any side effects with my (minimal) testing.

[dohomi]

@korylprince I've seen that and overwrite the md-dialog to auto. But this only solves that the container is scrollable but not, that the md-dialog-actions area is always visible at the bottom of the dialog. I am using Angular Material in a separate project and there it works quite well with forms inside of dialogs. https://material.angularjs.org/latest/demo/dialog If you check out the CUSTOM DIALOG I hope you find what I'm trying to suggest.

[korylprince]

@dohomi Yes, I see what you mean.

And taking a closer look at your codepen, I see that you're actually not using it quite right.

Here's a fixed version: http://codepen.io/korylprince/pen/MJGbZP

Basically, md-dialog-actions should be a sibling to md-dialog-content, not a sub-element.

And you've wrapped everything in a form (you're opening tag is actually "fom" ;) ), which also causes problems. Putting the form inside the md-dialog-content actually make everything work how you say.

I understand you wanting the button inside the form so you could use it to submit, but you can just as easily use a ref and have the button submit the form on click.

[dohomi]

@korylprince thanks for your example fix.

Do you think it is a big effort let the first sibling be a form tag being more close to valid HTML expression? But thanks I'll use it in your proposed way. I know that there was a similar issue at the Angular framework and they added the ability using the first tag as a form

Please feel free to close this issue.

[korylprince]

@dohomi I'm not sure how simple it would be to fix. It's possible it could be accomplished with just css, but that's more of a question for @marcosmoura to answer.