DropDownList menu is behind the Dialog

[tpmh31292]

I'm submitting a...

• Bug report

Current behavior

DropDownList menu is behind the Dialog

Expected behavior

It should be above the Dialog and not covered by the Dialog

Minimal reproduction of the problem with instructions

https://next.plnkr.co/edit/OY5VngU7Gb6ASF89

[Xizario]

@tpmh31292, thank you for the bug report. We will fix the issue.

As a temporary solution you can resolve it by adding such CSS rule in your page.

      .k-animation-container{
        z-index: 10003
      }

[jminnihan]

I am having the same issue, and the resolution above does not work. I am not seeing the list of items appear when selecting the down arrow button of the combo box.

[simonssspirit]

@jminnihan could you please share an example where the issue still persist after the CSS rule is applied?

[jminnihan]

I can now get it to display using this CSS rule:

.k-animation-container
z-index: 20003

However...
When I select the dropdown arrow it doesn't expand.
But...
If I click within the dropdown value area it does expand.

WTH?

[jminnihan]

BTW, I have the same issue with ComboBoxes, where selecting the arrow doesn't work, and selecting the X that appears when hovering over the combobox value doesn't work, but typing inside the box will make the list appear (as long as what I type appears as the starting value of an item in the list.

[jminnihan]

In fact, in both the DropDownList and ComboBox components, it looks like the button to the right with the down pointing chevron is disabled. How do I enable this like your stackblitz demos?

[nstoychev]

@jminnihan - Here is an updated example with the workaround and it works as expected - https://stackblitz.com/edit/react-qikevz?file=app%2Fmain.jsx

I guess the issue that you have is different.

[Xizario]

Added documentation in the popup on how to configure this:
https://www.telerik.com/kendo-react-ui/components/popup/stack-order/

[tizzick]

The work around for this bug is causing side effects on the TreeView control.
TreeView uses same .k-animation-container class in item selection and on item hover.

Minimal reproduction of the problem with instructions
https://stackblitz.com/edit/react-eg6993

1. click show dialog -> see selected tree view item is elevated over the dialog background shading.
2. mouse over un-selected tree items like "Sofa" -> see items hover class is also elevated above the dialog background.

Following instruction on this doc.
https://www.telerik.com/kendo-react-ui/components/popup/stack-order/
adding to css

.k-animation-container {
    z-index: 10003
}

[simonssspirit]

@Padhraic Thank you for the clarification.

We will look at a more functional solution.

Until that time, please check if setting the z-index for the Dialog to 99 is working fine?

[tizzick]

Setting the z-index of the dialog to 99 did not work for me. But after a little looking around I found that setting both k-animation-container and k-dialog-wrapper z-index to 10003 seems to work. I don't know if this will have any effects on other controls, but it is working in my small sample.

See my updated Stack Blitz here

.k-animation-container {
    z-index: 10003
}
.k-dialog-wrapper {
    z-index: 10003
}

[Nesyne]

Has anyone tried setting the z-index in Typescript? I have tried in both index.css and App.css but still can't get it to work.

[mr-aboutin]

As of November 2020, this issue is still active. Is someone working on it?

[Xizario]

@MrABoutin, yes the automatic calculation of the z-indexes in nested popups is scheduled for the upcoming release.

[rjlewisiii]

@Xizario

@MrABoutin, yes the automatic calculation of the z-indexes in nested popups is scheduled for the upcoming release.

For which release is this scheduled?

The aforementioned workaround (both .k-dialog-wrapper and .k-animation-container) works for us, but this is a "spray and pray" solution, meaning we're addressing the z-index of every .k-dialog-wrapper on the page. This is, as you may realize, NOT an ideal approach. We cannot even specifically address a single dropdown-containing dialog using the React className attribute because Kendo does not distribute the dialog's class name to the animation container which houses the actual dropdown list (because the actual .k-animation-container DOM element is global to the page).

[simonssspirit]

requested again in 1502777

[rjlewisiii]

For those following this thread, sharing the response I received via a Support Ticket request citing this issue:

This is already on our ToDo list for the next release cycle mid-January - mid-May.
We have a continuous delivery process and we release the features as soon as they are ready instead of waiting for the end of the release window.

The milestone will be updated once we know in which release version this will be a part of.

Regards, 
Stefan
Progress Telerik

@

[ksdc-grantw]

The work around for this bug is causing side effects on the TreeView control.
TreeView uses same .k-animation-container class in item selection and on item hover.

Minimal reproduction of the problem with instructions
https://stackblitz.com/edit/react-eg6993

1. click show dialog -> see selected tree view item is elevated over the dialog background shading.
2. mouse over un-selected tree items like "Sofa" -> see items hover class is also elevated above the dialog background.

Following instruction on this doc.
https://www.telerik.com/kendo-react-ui/components/popup/stack-order/
adding to css

.k-animation-container {
    z-index: 10003
}

As of KendoReact v4.7.0, these values should start higher, I set mine to 10100, so as to not mess around. Since v4.7, the starting z-index is about 10004, and due to the new dynamic z-index feature, it appears to increases each time the dialog/window component gains focus.

[Xizario]

@vladimirivanoviliev Could you confirm the milestone? and close it if it is done?

[vladimirivanoviliev]

Yes, this feature is included in latest 4.11 version.

[tony-garcia]

Still seeing an issue with dropdowns appearing behind dialogs in Kendo react 4.13.0. Not sure if this was the "solution" but now the container for the list that appears when you click on a dropdown is this (copied from dev tools)

<div class="k-animation-container k-animation-container-relative k-list-container k-reset k-animation-container-shown" style="z-index: 100; position: absolute; ..."></div>

So the solution was to inline-style the z-index to 100? The problem is that the default CSS for .k-dialog-wrapper has a z-index of 10001. My current workaround is to override the css this way for the dropdown (which is not ideal):

/* so  dropdowns show on modal dialogs */
.k-animation-container {
    z-index: 10003 !important;
}

[vladimirivanoviliev]

Hi Tony,
I would suggest to check the versions of all of your KendoReact packages and make sure they all are set to 4.13 as what I'm observing is that the zindexes are correctly stacking in that version. Here is a demo:

• https://stackblitz.com/edit/react-dvtcvv?file=app/main.jsx

Also the solution is based on using the context API to identify stacked components and increase the zindex of nested childrens dynamically (no static numbers used).

[leileigu]

This issue happens again on Version 5.2.0

[Xizario]

@leileigu I have updated the above testing example to 5.2.0 and it still works correct https://stackblitz.com/edit/react-dvtcvv-yjpzfa
If you feel this should be reopen, please give us the configuration that you are seeing issues with.

[jonjmills]

Seems to be broke again. Worked through 5.5.0, broken after 5.6.0