Paulo Galdo Sandoval Paulo Galdo Sandoval - 1 year ago 143
AngularJS Question

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

and inside this dialog i have the
but it doesn't display properly. It show under the dialog doing the select unreadable or clickeable

is there a way to use CSS to fix this??



this is the

<!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?
<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"
<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>
<div flex style="text-align: center;">
<button type="button"
class="btn btn-success">Devolver</button>
<md-content flex class="md-padding">
<button class="btn btn-md btn-danger pull-right"

and here is my function to trigger it.

$scope.cerrarNotaCredito = function () {{
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

Answer Source

After a month i've tried once to solve this problem with a successful result.

i just add z-index as Ajay said.

In the css of the dialog className: 'ngdialog-theme-sm ngdialog-theme-custom',

more specific on the 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;

That's all and working pretty fine. Hope this help to someone with the same problem.