This is a migrated thread and some comments may be shown as answers.

Dropdownlist invisible inside Dialog

2 Answers 574 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Tomasz
Top achievements
Rank 1
Tomasz asked on 03 Oct 2019, 09:40 AM

Hello,

when using dropdownlist component inside Dialog list of available items is behind the dialog - this is related to z-index. I attach sample code.

Stackblitz example

2 Answers, 1 is accepted

Sort by
0
Tomasz
Top achievements
Rank 1
answered on 03 Oct 2019, 09:42 AM

I noticed this thread: https://www.telerik.com/forums/rendering-issue-of-a-dropdownlist-in-a-window

Seems that this is still on developer side to define correct z-index right?

0
Stefan
Telerik team
answered on 03 Oct 2019, 10:07 AM

Hello, Tomasz,

Yes, currently the z-index has to be set by the developer depending on the use case.

This provides more control over the stack order of the application:

https://www.telerik.com/kendo-react-ui/components/popup/stack-order/

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 27 Apr 2023, 04:39 PM

The problem with this approach is that the z-index is set directly on the element, giving it a higher priority than the style sheet. Is there a way to change what gets thrown on the element? I would rather not have to use !important in the style sheet if I can avoid it. 
Konstantin Dikov
Telerik team
commented on 28 Apr 2023, 08:37 PM

Hi Lee,

With the latest version of KendoReact, using the Dialog from our package and placing a DropDownList inside it will allow automatic adjustment of the z-index of the DropDownList popup. However, if you are using third-party Dialog component, setting !imporant would be the only possible way to override the z-index with CSS.

Another option would be to handle the onOpen event, get reference to the popup element and manually change the inline z-index with JavaScript:

Hope this helps.

 

Tags
General Discussions
Asked by
Tomasz
Top achievements
Rank 1
Answers by
Tomasz
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or