Unable to change Dialog Style

[ammarkhan91]

One of my Angular component render a Dialog but I want to change it's z-index. And for that I wanted to change the z-index for the class 'ui-dialog'. So I have a component specific style sheet file, and in there I write a below rule that doesn't seems to be working. Please suggest

.ui-dialog {
z-index: 9999 !important;
}

[ammarkhan91]

Any help on this would be appreciated. If more detail required, please let me know.

[cagatay.civici]

Z-index is a dynamic property that is increased everytime an overlay is shown to display one top of other one so can't be a constant. Initial is 1000.

[ammarkhan91]

I see, so how could I fix my problem? I have a grid on my main page and there is a button to add new record. When click the dialog appear but it's header is not visible, and that can be fix by setting the z-index. Please check the below image

http://imgur.com/cTqivC9

[cagatay.civici]

What is the z-index of your topbar in your app, the black bar? I think it is more than 1000 right? Try making it 999.

[ammarkhan91]

Yes, that was the problem. Thanks so much.

[cagatay.civici]

Good to hear, thank you.