javascript - Angular-Material md-select in md-dialog - Stack Overflow

admin管理员组

文章数量:1429096

I have an angular material app in which I have a button that triggers a dialog box with a dropdown in it. If the button is at the top, everything works fine and as expected.

If the button is towards the bottom so the user has to scroll to get to it, however, once the dropdown is hit, the page jumps back to the top. The dialog box stays open at the bottom and I can't scroll down to it or click out of it, so I have to reload the page to do anything and the dialog box is useless.

If I use

<select ng-options="opt.val as opt.name for opt in options" ng-model="d"></select>

then it works fine.

But if I use a md-select

<md-select ng-model="d">
    <md-option ng-value="opt.val" ng-repeat="opt in options">{{opt.name}}</md-option>
</md-select>

then it breaks.

jsfiddle: /

If you scroll all the way to the bottom of the output, click a button, then try to open the dropdown, you can see the issue.

Is there any way to avoid this?

I have an angular material app in which I have a button that triggers a dialog box with a dropdown in it. If the button is at the top, everything works fine and as expected.

If the button is towards the bottom so the user has to scroll to get to it, however, once the dropdown is hit, the page jumps back to the top. The dialog box stays open at the bottom and I can't scroll down to it or click out of it, so I have to reload the page to do anything and the dialog box is useless.

If I use

<select ng-options="opt.val as opt.name for opt in options" ng-model="d"></select>

then it works fine.

But if I use a md-select

<md-select ng-model="d">
    <md-option ng-value="opt.val" ng-repeat="opt in options">{{opt.name}}</md-option>
</md-select>

then it breaks.

jsfiddle: https://jsfiddle/st3m3x0g/3/

If you scroll all the way to the bottom of the output, click a button, then try to open the dropdown, you can see the issue.

Is there any way to avoid this?

• javascript
• html
• angularjs
• dialog
• material-design

Share Improve this question Follow asked Apr 10, 2015 at 21:27 yammeradeyammerade 62988 silver badges2020 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

This functionality not working in angular material v0.9.8, actually i need a functionality on a dialog box when i click outside the box it should hide in v 0.9.8 of angular material.

This has been fixed in v0.9.0

See issue 1648 for further details.

本文标签： javascriptAngularMaterial mdselect in mddialogStack Overflow