选择选项显示在对话框后面ngDialog

我试图在我的应用程序中使用ngDialog **插件，不幸的是，md-options显示在对话框后面。选择选项显示在对话框后面ngDialog

这里是HTML代码：

<md-card> 
<md-card-content> 
        <div layout="row"> 
         <md-input-container> 
          <label>State</label> 
          <md-select ng-model="ctrl.userState"> 
          <md-option><em>None</em></md-option> 
          <md-option ng-repeat="user in rao">{{user.name}}</md-option> 
          </md-select> 
         </md-input-container> 
        </div> 
       </md-card-content> 
      </md-card>

，输出是： enter image description here

来源

2016-09-15 kk gowtamasa

试试这个，

<md-dialog aria-label="options dialog"> 
      <md-dialog-content layout-padding> 
       <h2 class="md-title">Choose an option</h2> 
       <md-select ng-model="myModel" placeholder="Pick"> 
       <md-option>1</md-option> 
       <md-option>2</md-option> 
       <md-option>3</md-option> 
       </md-select> 
      </md-dialog-content> 
      <md-dialog-actions> 
      <span flex></span> 
      <md-button ng-click="close()">Okay!</md-button> 
      </md-dialog-actions> 
    </md-dialog>

WORKING DEMO

来源

2016-09-15 17:34:19 Sajeetharan

感谢您的答复，但问题仍然存在，现在我看到一个空模态对话框，但如果我在表面上降点击可以取出模态对话框 –

@kkgowtamasa后面我没有得到打开相同问题，您正在使用哪个浏览器和版本？ – Sajeetharan

我使用铬。 –

终于让我找到了解决方案，这问题通过设置z-index v ALUE。其实我使用ngDiloag和角材料。所以，这里md-select是ngDialog后面的渲染选项。所以我设置Z指数

.ngdialog.ngdialog-theme-default { 
    z-index: 80; 
}

来源

2016-09-17 07:10:48

只需更新“angular-material.min.css”文件中的类。

.md-select-menu-container, 
.md-open-menu-container { 
    z-index:999999important; 
}

来源

2017-06-30 08:57:20

选择选项显示在对话框后面ngDialog

回答

相关问题