TabBar hides popup form form Grid

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Declined

Last Updated: 10 Jan 2022 07:37 by ADMIN

improwise

Created on: 06 Jan 2022 21:55

Category: UI for Blazor

Type: Bug Report

TabBar hides popup form form Grid

It seems that the TabBar convers some parts of the popup form from the Grid. See image. If we move the grid outside of the TabBar, the problem goes away.

7 comments

ADMIN

Dimo

Posted on: 10 Jan 2022 07:37

I see. Thanks for sharing what turned out.

Best,
Dimo
Progress Telerik

Learn about the important changes coming in UI for Blazor 3.0 in January 2022!

improwise

Posted on: 08 Jan 2022 19:50

Turns out this was entirely our own fault it seems. Due to some unfortunate copy & paste, we had gotten <TelerikRootComponent> both in the parent page and the child component. After removing that, all problems seemed to disappear. Sorry for this.

improwise

Posted on: 08 Jan 2022 19:26

We've done some further testing, it seems the controls work as they should if they are either in a TelerikTabStrip or a Component, but not if they are in a component that is in a TelerikTabStrip (Tab). Maybe this could be related to the height of the TelerikTabStrip which seems to be dynamic, not sure if there is a way to make it fixed and see if that has an impact on this.

improwise

Posted on: 08 Jan 2022 18:52

Not sure if it is relevant but the TelerikTabStrip is defined in a page (parent), and each tab contains a different Blazor Component, each displaying data related to what is selected in a grid in the parent page (master/detail scenario). The different screenshots are from when we render the compoent inside a tab (first one) or outside of the TelerikTabStrip (second one).

                <TelerikTabStrip TabPosition="Telerik.Blazor.TabPosition.Top">
                    <TabStripTab Title="Anteckningar">
                        <CustomerNote CustomerId=@corporateCustomer.Id></CustomerNote>
                    </TabStripTab>
                    <TabStripTab Title="Dokument">
                        <CustomerDocument CustomerId=@corporateCustomer.Id></CustomerDocument>
                    </TabStripTab>
                    <TabStripTab Title="Extern risk">
                        Kommer snart :)
                    </TabStripTab>
                </TelerikTabStrip>

                <CustomerDocument CustomerId=@corporateCustomer.Id></CustomerDocument>

improwise

Posted on: 08 Jan 2022 18:47

Somethings seems to be really of with the TelerikTabStrip which is causing all kind of problems for controls in it, like this one when expanding a dropdown list.

If you move the controls outside of the TelerikTabStrip, they seem to start working as expected again:

(The grid is only there to make sure the underlying datasource is returning the expected data)

ADMIN

Dimo

Posted on: 07 Jan 2022 13:38

Hi Patrick,

Here is a test page that works as expected. Can you modify it to reproduce the problem? This will allow us to confirm if this is a bug or the issue depends on the app layout.

I suspect the cause of the overlapping are some specific z-index styles and stacking contexts on the page.

The default z-index style of the Window is 10002 and generally, it is somewhere a little over 10000. Undesired overlapping can occur if the TabStrip is in a stacking context above this value. For example I am able to reproduce a similar (but not the same) overlapping if I set z-index:20000 and position:relative to the TabStrip.

The solution is:

reduce the z-index style of the offending stacking context (recommended)
increase the z-index style of the Window container. The exact value will depend on the stacking context you want to "step on". (this option is not optimal, because you will be overriding an inline style with an !important clause)

    div.k-dialog-wrapper {
        z-index: 21000 !important;
    }

Regards,
Dimo
Progress Telerik

Learn about the important changes coming in UI for Blazor 3.0 in January 2022!

improwise

Posted on: 07 Jan 2022 13:29

Who needs more info from whom?