javascript - Angular Material 选择显示在对话框下

标签 javascript angularjs css angular-material ng-dialog

我遇到了一个奇怪的问题,但不知道如何解决。

我有一个由 ngDialog 生成的对话框,在这个对话框中我有 md-select 但它无法正确显示。它显示在对话框下进行选择不可读或可点击

有没有办法使用 CSS 来解决这个问题?

md-select

编辑

这是modal-cerrar-nota.html

<!DOCTYPE html>
<div class="ngdialog-message" md-theme="docs-dark">
    <md-toolbar class="md-warn">
        <div class="md-toolbar-tools">
            <h3 class="modal-title" style="width: 100%; text-align: center;">
                ¿Deseas finalizar esta nota de credito?
            </h3>
        </div>
    </md-toolbar>
    <md-content flex>
        <md-content class="md-padding" flex>
            <div layout="column" class="md-padding">
                <p flex style="text-align: center; font-weight: bold;">Una vez finalizada esta acción no podras deshacerla.</p>
                <form name="cerrarNota" 
                      ng-controller="ClienteController"
                      data-ng-init="listaClientes()">
                    <md-input-container class="md-block md-icon" flex>
                        <label>Seleccione un cliente</label>
                        <md-icon class="material-icons">&#xE7EF;</md-icon>
                        <md-select ng-model="cli"
                                   ng-model-options="{trackBy: '$value.idCliente'}"
                                   required name="cliente">                                            
                            <md-option ng-value="cliente" 
                                       ng-repeat="cliente in clientes">{{cliente.nombreCliente}}</md-option>                                            
                        </md-select>
                    </md-input-container>
                    <div flex style="text-align: center;">
                        <button type="button"
                                ng-click=""
                                class="btn btn-success">Devolver</button>
                    </div>
                </form>
            </div>
        </md-content>
    </md-content>
    <md-content flex class="md-padding">
        <button class="btn btn-md btn-danger pull-right"
                ng-click="closeThisDialog('')">Cerrar</button>
    </md-content>
</div>

这是我触发它的函数。

$scope.cerrarNotaCredito = function () {
    ngDialog.open({
        template: 'views/nota_credito/modal-cerrar-nota.html',
        className: 'ngdialog-theme-sm ngdialog-theme-custom',
        showClose: false,
        controller: 'ModalController',
        closeByDocument: false,
        closeByEscape: false
    });
};

请告诉我您是否还需要 ngDialog className 的 CSS

最佳答案

一个月后我尝试一次解决这个问题并取得了成功。

我只是按照 Ajay 所说添加了 z-index

在对话框的CSS中className: 'ngdialog-theme-sm ngdialog-theme-custom',

更具体地了解自定义 CSS ngdialog-theme-sm

.ngdialog.ngdialog-theme-sm {
z-index: 80;
padding-bottom: 50px;
padding-top: 50px;
-webkit-perspective: 1300px;
-ms-perspective: 1300px;
perspective: 1300px;
-webkit-perspective-origin: 50% 150px;
-ms-perspective-origin: 50% 150px;
perspective-origin: 50% 150px;
}

这就是全部并且工作得很好。希望这对遇到同样问题的人有所帮助。

关于javascript - Angular Material 选择显示在对话框下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38156064/

相关文章:

javascript - 如何在父 div 中使用 y-overflow-scroll 调整 div?

javascript - 如何使用 lodash 按 ID 合并两个对象数组?

javascript - 使用 JavaScript 和 JQuery,如何维护动态更新的 HTML 选择元素的选定状态?

AngularJS Bootstrap 单选按钮组

html - 在所有行上拉伸(stretch) 4 个 Bootstrap 按钮

javascript - 具有渐变颜色的 Highcharts 数据标签

javascript - 有没有办法在 react 单页应用程序中写入服务器上的文件?

javascript - 在不同页面上的jquery mobile中播放声音

jquery - Angular Responsive Table 不适用于 Internet Explorer 9 (IE 9)。适用于 IE 10

javascript - 如何在我的项目中将 'ngProgress' 配置为加载器 [ngbp 样板文件]