简体   繁体   English

对角线下的角度材质选择显示

[英]Angular material select display under dialog

i'm having a weird issue and don't know the way of solve it. 我有一个奇怪的问题,不知道解决它的方法。

i have a dialog generated by ngDialog and inside this dialog i have the md-select but it doesn't display properly. 我有一个由ngDialog生成的对话框,在这个对话框中我有md-select但它没有正确显示。 It show under the dialog doing the select unreadable or clickeable 它在对话框下显示选择不可读或可解决

is there a way to use CSS to fix this?? 有没有办法用CSS来解决这个问题?

MD-选择

EDIT 编辑

this is the modal-cerrar-nota.html 这是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>

and here is my function to trigger it. 这是我触发它的功能。

$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
    });
};

please tell me if you need also the CSS of the ngDialog className 如果你还需要ngDialog className的CSS,请告诉我

After a month i've tried once to solve this problem with a successful result. 一个月后,我尝试过一次以成功的结果解决这个问题。

i just add z-index as Ajay said. 我只是添加z-index因为Ajay说。

In the css of the dialog className: 'ngdialog-theme-sm ngdialog-theme-custom', 在对话框className: 'ngdialog-theme-sm ngdialog-theme-custom',的css中className: 'ngdialog-theme-sm ngdialog-theme-custom',

more specific on the custom css ngdialog-theme-sm 更具体的自定义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;
}

That's all and working pretty fine. 这一切都很好,工作得很好。 Hope this help to someone with the same problem. 希望对有同样问题的人有所帮助。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM