I have a dialog which includes a TabStrip with 2 tabs (see attached image dialog-1.png). "Above" this dialog I opened another dialog but then the tabs from the dialog "underneath" still shine through (see attached image dialog-2.png). I tried to give the top dialog a z-index of 99999 but it did not help like this:
<Dialog
title={t('program:datapoints')}
onClose={props.cancelForm}
width={'60%'}
height={'80%'}
style={{ zIndex: 99999 }}
>2 Answers, 1 is accepted
Hello Bernd,
The "style" property of the Dialog will add the styles to the content element of the component and not the wrapper. For adding custom z-index to the second Dialog you can set the className property as shown below:
<Dialog
className="second-level-dialog"And the CSS:
<style>
.second-level-dialog{
z-index: 10005!important;
}We are adding "!important", because the dialog will add inline style for the z-index.
Please give this a try and let us know if the above resolves the issue. If the problem persists, please share the exact configuration that you have along with any custom styles, so we can debug it locally.
Regards,
Konstantin Dikov
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 5
Bronze
Bronze
Bronze
Hi Konstantin.
Thanks for this solution but as mentioned above, I just updated all the Telerik components via npm and the issue was gone. Still I will for sure keep this in mind for the future!
Thanks!
Rank 5
Bronze
Bronze
Bronze