Tabstrip shows in foreground when Dialog box is displayed

[schakravarty]

I have an application with multiple tabs on it. Since upgrading progress packages as well as Angular 12, the tabs display on a higher zindex as the application causing the tabs to bleed into dialog boxes that are shown. Is this a bug?

[Ivo]

Hi Paul,

This behavior is not a bug. It is caused by some CSS rules that are needed for the overall styling and functionality of the Tabstrip component.

We do not recommend nesting the Dialog component in the Tabstrip component. But if it needs to be done that way the following CSS code can be used as a workaround (it can be seen in action in this Stackblitz example):

.k-tabstrip-items-wrapper {
    z-index: auto;
}

.k-tabstrip-top > .k-content {
    margin-top: 1px;
}

.k-tabstrip-right > .k-content {
    margin-right: 1px !important;
}

.k-tabstrip-bottom > .k-content {
    margin-bottom: 1px;
}

.k-tabstrip-left > .k-content {
    margin-left: 1px !important;
}

It is now working differently than before because we had to make some markup and style changes that were needed for the Scrollable Tabs functionality.

Let us know in case additional information is needed.

Regards,
Ivo
Progress Telerik