CODEWITHSUNDEEP
angularjsng-dialog
kk gowtamasa
kk gowtamasa

Reputation: 41

select options are showing behind the dialog box ngDialog

i'm trying to use ngDialog** plug-in in my application unfortunately md-options are showing behind the dialog.

here is the HTML code:

<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>

And the output is: enter image description here

Upvotes: 1

Views: 3224

Answers (3)

Sridhar Dhayalan
Sridhar Dhayalan

Reputation: 1

Just update the class in "angular-material.min.css" file.

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

Upvotes: 0

kk gowtamasa
kk gowtamasa

Reputation: 41

Finally i found the solution for this problem by setting z-index value. Actually im using ngDiloag and angular materials. So, here md-select is rendering options behind the ngDialog. So i set the z-index

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

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222552

Try this,

    <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

Upvotes: 0

Related Questions