Open gitgdako opened 10 months ago
Hi @gitgdako
please add a reproducible example, preferably by using this codeSandbox template.
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:
part
attribute on each icon container, so the z-index
can be adjustedposition: absolute
and z-index
at all (if possible)z-index: 0; position:relative
to the root element (not sure if this will cause other side-effects)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
The issue was fixed for the + icon, the - icon still overlays the header. Webcomponents 1.19, Webcomponents React 1.22.2. Please reopen
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
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>
Hi @Lukas742 @NHristov-sap, as the issue isnt fixed, should I open another issue or can you reopen this one?
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.
The button now overlays the Header as well. Cant say when that was introduced, we are currently on 1.27.0 / 1.24.0
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
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