CODEWITHSUNDEEP
cssangularjstwitter-bootstrapangular-material
Renaud is Not Bill Gates
Renaud is Not Bill Gates

Reputation: 2074

dialog box is never on the top of the page

I have a page where I have a fixed navbar in right and the content of the page.

in the content of the page I have a button when I click on him it will open a dialog in the center of the page, I'm using Angular Materiel Dialogs for this.

The problem is when I open the dialog the fixed bar is always on the top of the page :

enter image description here

As you can see the side bar is hiding a part of that dialog box.

And this is the code i use to diplay my dialog box :

$mdDialog.show({
                    clickOutsideToClose: true,
                    controller         : DialogController,
                    controllerAs       : 'vm',
                    parent             : $document.find('body').eq(0),
                    templateUrl        : templateUrl,
                    targetEvent        : event
                });

As you can see I'm using $document.find('body').eq(0), as a parent for the dialog, but why this dialog is never on top of the side bar ?

jsfiddle :

http://jsfiddle.net/jhzawjdb/17/

How can I solve this ?

Upvotes: 0

Views: 446

Answers (2)

Moojjoo
Moojjoo

Reputation: 753

#sidebar-wrapper {
    z-index: 0;
}

Change z-index to 0 and this will correct the modal aka dialog box.

Upvotes: 3

TomSlick
TomSlick

Reputation: 735

Override or change the z-index on #sidebar-wrapper to 0 from 1000.

http://jsfiddle.net/vcpqasyd/

Upvotes: 1

Related Questions