[Step Input / Object Page Section]: Step Icon visible over Header when scrolling

[wvudako]

Describe the bug

We have an Object Page
with an Object Page Section,
which contains an Analytical Table,
which has a Step Input in a Toolbar inside its Header

When scrolling downwards so the step input "moves behind" the Header, the plus/minus i.e. +/- Signs are still visible over the header. The attached screenshot probably shows best what i mean

The behaviour is the same when the header is collapsed

Isolated Example

No response

Reproduction steps

1. Open page with given structure (see above)
2. Scroll down so step input is "behind" Header

Expected Behaviour

The signs are hidden behind the header, therefore disappear

Screenshots or Videos

UI5 Web Components for React Version

1.20.0

UI5 Web Components Version

1.18.0

Browser

Chrome

Operating System

Windows

Additional Context

No response

Relevant log output

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @gitgdako

please add a reproducible example, preferably by using this codeSandbox template.

[Lukas742]

Hi @gitgdako

I checked again and was now able to reproduce this issue. The reason why the icons of the StepInput are visible is because the z-index of them is higher than the one of the header. As a workaround you can probably set the z-index of the StepInput component to 0. Since I don't think that this behavior is intended, I'm going to forward this issue to our UI5 Web Components colleagues, as the StepInput is developed in their repo.

---

Hi colleagues,

the icons of the StepInput have a z-index of 2 (see here) which can cause issues with the stacking order for other positioned elements. You can find an example for this behavior here: https://codesandbox.io/s/ui5-webcomponents-forked-w4nlcv?file=/src/index.js

Potential solutions:

• Offering a part attribute on each icon container, so the z-index can be adjusted
• Not relying on position: absolute and z-index at all (if possible)
• Adding z-index: 0; position:relative to the root element (not sure if this will cause other side-effects)

[wvudako]

I am impressed! We were already planning to work on a reproducer project, but since we are working with several frameworks it was a task that wasn't easy for us. Thank you for managing without it :)

Concerning the issue: Obviously this isn't a blocker and we can live with it not being as pretty

[wvudako]

The issue was fixed for the + icon, the - icon still overlays the header. Webcomponents 1.19, Webcomponents React 1.22.2. Please reopen

[NHristov-sap]

Hello @gitgdako ,

The construction of the ui5-step-input requires left icon to be with z-index: 1 (as technically the [ - ] button stays over the input, the same for focus rectangle, so if the overlying container have z-index less than 2, they both will appear over it. There was an example (that is not working at this moment) where the hovering container was with z-index: 2, and the [ - ] and focus were under it, can you provide real working example of your use case?

Best Regards,
Nikolay Hristov

[wvudako]

I have copied part of the DOM tree of our project, sorry I can not at this point provide a full reproducer.

I think the missing piece here is that we are using the Objectpage in "mode: @UI5\webcomponents-react\dist\enums\ObjectPageMode.d.ts.IconTabBar,", which you can see on the screenshots but is not clearly stated.

In the code below you can see that the DynamicPageHeader has a z-index of 1. The same applies to the ObjectPage-tabContainer-*, which has a generated Styleclass ".ObjectPage-tabContainer-0-2-14" with z-index of 1. Since the + icon has a z-index of 0, it does not overlay. Setting the z-index to 2 fixes the problem for both elements.

I hope this is enough information to reproduce the issue.

Note: Localization is de_at

<div data-component-name="ObjectPage" class="ObjectPage-objectPage-0-2-5 sapScrollBar ObjectPage-iconTabBarMode-0-2-6" style="">
    <header data-component-name="ObjectPageTopHeader" data-not-clickable="false" aria-roledescription="Object Page header" class="ObjectPage-header-0-2-10"
            style="grid-auto-columns: min-content 100%; display: grid;">
        <div class="FlexBox-flexBox-0-2-31 FlexBox-flexBoxDirectionRow-0-2-46 FlexBox-justifyContentStart-0-2-34 FlexBox-alignItemsStretch-0-2-42 FlexBox-flexWrapNoWrap-0-2-48 DynamicPageTitle-container-0-2-21"
             data-component-name="DynamicPageTitle" data-not-clickable="false" data-header-content-visible="true">
            <div class="FlexBox-flexBox-0-2-31 FlexBox-flexBoxDirectionRow-0-2-46 FlexBox-justifyContentStart-0-2-34 FlexBox-alignItemsCenter-0-2-41 FlexBox-flexWrapNoWrap-0-2-48 DynamicPageTitle-middleSection-0-2-25"
                 data-component-name="DynamicPageTitleMiddleSection">
                <div class="FlexBox-flexBox-0-2-31 FlexBox-flexBoxDirectionRow-0-2-46 FlexBox-justifyContentStart-0-2-34 FlexBox-alignItemsStretch-0-2-42 FlexBox-flexWrapNoWrap-0-2-48 DynamicPageTitle-titleMainSection-0-2-24">
                    <div class="DynamicPageTitle-title-0-2-26" data-component-name="DynamicPageTitleHeader">
                        <ui5-title level="H2" wrapping-type="Normal" role="group" title="Object Page Title" ui5-title="">...</ui5-title>
                    </div>
                    <div class="DynamicPageTitle-subTitle-0-2-27" data-component-name="DynamicPageTitleSubHeader">
                        <ui5-title level="H2" role="group" title="Object Page Subtitle" ui5-title="">...</ui5-title>
                    </div>
                    <div class="DynamicPageTitle-content-0-2-29" data-component-name="DynamicPageTitleContent"></div>
                </div>
                <div class="Toolbar-outerContainer-0-2-51 Toolbar-clear-0-2-53 Toolbar-active-0-2-54 DynamicPageTitle-toolbar-0-2-30"
                     data-sap-ui-fastnavgroup="true" data-component-name="DynamicPageTitleActions">
                    <div class="Toolbar-toolbar-0-2-58" data-component-name="ToolbarContent"><span class="spacer"
                                                                                                   style="flex-grow: 1; height: 100%; cursor: pointer;"></span>
                        <div class="Toolbar-childContainer-0-2-63" data-component-name="ToolbarChildContainer"></div>
                        <div class="Toolbar-childContainer-0-2-63" data-component-name="ToolbarChildContainer">
                            <ui5-button design="Default" type="Button" ui5-button="">...</ui5-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="DynamicPageHeader-header-0-2-64" data-component-name="DynamicPageHeader" style="top: 64px; z-index: 1;">
        <div class="ObjectPage-headerContainer-0-2-8" data-component-name="ObjectPageHeaderContainer">
            <svg width="5rem" height="5rem" class="ObjectPage-headerImage-0-2-11" role="group" aria-label="Object Page Type">
                <rect width="100%" height="100%" fill="var(--sapAvatar_1_Background)" rx="10%"></rect>
                <circle width="100%" height="100%" fill="var(--sapAvatar_1_Background)" rx="10%"></circle>
                <text dominant-baseline="middle" text-anchor="middle" x="50%" y="55%" font-size="2.2rem" font-family="var(--sapFontFamily)"
                      fill="var(--sapAvatar_1_TextColor)">...
                </text>
            </svg>
            <div data-component-name="ObjectPageHeaderContent">
                ...
            </div>
        </div>
    </div>
    <div data-component-name="ObjectPageAnchorBar" class="ObjectPage-anchorBar-0-2-13" style="top: 203px;">
        <section data-component-name="DynamicPageAnchorBar" role="navigation" class="DynamicPageAnchorBar-container-0-2-72">
            <ui5-button accessible-name="Kopfbereich komprimieren" design="Default" icon="slim-arrow-up" tooltip="Kopfbereich komprimieren" type="Button"
                        data-ui5wcr-dynamic-page-header-action="" data-component-name="DynamicPageAnchorBarExpandBtn"
                        class="DynamicPageAnchorBar-anchorBarActionButton-0-2-73 DynamicPageAnchorBar-anchorBarActionButtonExpandable-0-2-74 DynamicPageAnchorBar-anchorBarActionPinnableAndExpandable-0-2-76"
                        ui5-button="" icon-only="" has-icon=""
                        style="--_ui5-v1-20-0_button_base_min_width: 1.5rem; --_ui5-v1-20-0_button_base_height: 1.5rem;"></ui5-button>
            <ui5-toggle-button pressed="true" accessible-name="Kopfbereich lösen" design="Default" icon="pushpin-off" tooltip="Kopfbereich lösen" type="Button"
                               data-ui5wcr-dynamic-page-header-action="" data-component-name="DynamicPageAnchorBarPinBtn"
                               class="DynamicPageAnchorBar-anchorBarActionButton-0-2-73 DynamicPageAnchorBar-anchorBarActionButtonPinnable-0-2-75"
                               ui5-toggle-button="" style="--_ui5-v1-20-0_button_base_min_width: 1.5rem; --_ui5-v1-20-0_button_base_height: 1.5rem;"
                               icon-only="" has-icon=""></ui5-toggle-button>
        </section>
    </div>
    <div class="ObjectPage-tabContainer-0-2-14" data-component-name="ObjectPageTabContainer" style="top: 203px;">
        <ui5-tabcontainer collapsed="true" fixed="true" content-background-design="Solid" header-background-design="Solid" tab-layout="Standard"
                          tabs-overflow-mode="End" data-component-name="ObjectPageTabContainer" class="ObjectPage-tabContainerComponent-0-2-15"
                          ui5-tabcontainer="" data-sap-ui-fastnavgroup="true">
            ...
        </ui5-tabcontainer>
    </div>
    <div data-component-name="ObjectPageContent" class="ObjectPage-content-0-2-16">
        ...
    </div>
</div>

[wvudako]

Hi @Lukas742 @NHristov-sap, as the issue isnt fixed, should I open another issue or can you reopen this one?

[Lukas742]

Hi @NHristov-sap

I don't think that reducing the z-index is enough to solve this issue, because now it still overlays the sticky element if it has a z-index of 1.
In my opinion the stacking context should not "escape" the web component, or should at least be customizable. I've edited my codeSandbox, to give you a possible solution for this. I tested it in all major browsers and with the custom css it seems to be working fine.

[wvudako]

The button now overlays the Header as well. Cant say when that was introduced, we are currently on 1.27.0 / 1.24.0