Kendo-angular: z-index not inherited

[tapopov]

Current behavior

The Popup does not inherit its anchor z-index. In some cases this causes the Popup's content to be rendered behind its parent element.

Expected behavior

The Popup's content should always be visible, so using the same z-index as the parent element is mandatory.

Related GitHub issues

https://github.com/telerik/kendo-angular/issues/628
https://github.com/telerik/kendo-angular/issues/624
https://github.com/telerik/kendo-angular/issues/625
https://github.com/telerik/kendo-angular/issues/641

[ggkrustev]

The issue is fixed and should be live early next week.

[meriturva]

Just to know....is it released?
i have tried kendo-angular-dropdowns 1.0.10 version without success.

[ggkrustev]

Not yet. We are in a process of upgrading Angular, which slowed us down. We should release the fix this week.

[ggkrustev]

The fix is live. Check @progress/[email protected]

[web-hollywood]

Hi ggkrustev
I've checked it with the version of @1.1.0.
But I can still see the same issue.

[meriturva]

Actually on my side it works. In fact kendo popup element it is created on top of all app elements.

[ggkrustev]

@meriturva, thanks for the confirmation.

@fulfillGit, could you post a repro demo? A runnable plunkr will be great.

[squadwuschel]

@ggkrustev I've the same Problem, I was using the dropdown in version 0.39.9 and after the upgrade to "1.1.0" the dropdown is allways behind my modal from ngBootstrap (I using the ngBootstrap modal at the moment). It also seems that you have removed a valide Version 0.39.9 from the repo because it tolds me that no compatible version for 0.39.9 was found but I am using this version in my other project!

my current dependencies

"dependencies": {
"@angular/animations": "4.2.4",
"@angular/common": "4.2.4",
"@angular/compiler": "4.2.4",
"@angular/core": "4.2.4",
"@angular/forms": "4.2.4",
"@angular/http": "4.2.4",
"@angular/platform-browser": "4.2.4",
"@angular/platform-browser-dynamic": "4.2.4",
"@angular/router": "4.2.4",
"@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.26",
"@progress/kendo-angular-buttons": "1.0.4",
"@progress/kendo-angular-dateinputs": "1.0.1",
"@progress/kendo-angular-dialog": "1.0.3",
"@progress/kendo-angular-dropdowns": "1.1.0",
"@progress/kendo-angular-inputs": "1.0.5",
"@progress/kendo-angular-intl": "1.2.0",
"@progress/kendo-angular-l10n": "1.0.1",
"@progress/kendo-theme-default": "2.37.5",
"bootstrap": "4.0.0-alpha.6",
"core-js": "2.4.1",
"font-awesome": "4.7.0",
"rxjs": "5.0.1",
"cldr-data": "31.0.2",
"zone.js": "0.8.4"
},

[ggkrustev]

Hi @squadwuschel,
Indeed the popup opens behind the Dialog component. It seems that the popup is appended to the root component (in order to work in Universal app too), where the Dialog is rendered directly in the end of the document.body. This breaks our z-index calculations.

We will further investigate the case and will update your soon.

For now, you can easily workaround this issue appending the popup (all popups) to the document.body using the following provider:

import { POPUP_CONTAINER } from '@progress/kendo-angular-popup';
...
    providers: [
    {
      provide: POPUP_CONTAINER,
      useFactory: () => {
        return ({ nativeElement: document.body } as ElementRef);
      }
    }
  ],
  bootstrap: [AppComponent]
...

[squadwuschel]

@ggkrustev yes thats works as workaround so far :-) thx

[ggkrustev]

@squadwuschel, the popup changes are live. Check version 1.1.1.

[squadwuschel]

@ggkrustev the dropdownlist now works.