Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Slider]: Slider handle is visible on scroll in the Dynamic Page #6107

Closed
1 task done
saurabhmehta02 opened this issue Jul 22, 2024 · 1 comment
Closed
1 task done
Labels

Comments

@saurabhmehta02
Copy link

Describe the bug

We are using web component inside the
On scroll, the Dynamic Page title section should have higher z-index but Slider component's handle as same z-index as Dynamic Page title (z-index: 2) and the handle is visible in the header section on scroll which doesn't look good and also has been reported by our customers.

Isolated Example

No response

Reproduction steps

Try running below code:
<DynamicPage headerTitle={<DynamicPageTitle actions={<><Button design="Emphasized">Edit</Button><Button design="Transparent">Delete</Button><Button design="Transparent">Copy</Button><Button design="Transparent" icon="action" /></>} breadcrumbs={<Breadcrumbs><BreadcrumbsItem>Home</BreadcrumbsItem><BreadcrumbsItem>Page 1</BreadcrumbsItem><BreadcrumbsItem>Page 2</BreadcrumbsItem><BreadcrumbsItem>Page 3</BreadcrumbsItem><BreadcrumbsItem>Page 4</BreadcrumbsItem><BreadcrumbsItem>Page 5</BreadcrumbsItem></Breadcrumbs>} expandedContent={<MessageStrip>Information (only visible if header content is expanded)</MessageStrip>} header={<Title>Header Title</Title>} navigationActions={<><Button design="Transparent" icon="full-screen" /><Button design="Transparent" icon="exit-full-screen" /><Button design="Transparent" icon="decline" /></>} subHeader={<Label>This is a sub header</Label>}><Badge>Status: OK</Badge></DynamicPageTitle>}> <div style={{ height: '1800px' }}> <Slider /> </div> </DynamicPage>;

Expected Behaviour

The slider handle shouldn't be visible on scroll

Screenshots or Videos

Screen.Recording.2024-07-22.at.5.47.33.PM.mov

UI5 Web Components for React Version

1.29.0

UI5 Web Components Version

1.24.0

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

SAP

Declaration

  • I’m not disclosing any internal or sensitive information.
MarcusNotheis added a commit that referenced this issue Jul 25, 2024
Prevents that parts of some Web Components (e.g. `Slider`) are shining through the header content

Fixes #6107
MarcusNotheis added a commit that referenced this issue Jul 26, 2024
Prevents that parts of some Web Components (e.g. `Slider`) are shining through the header content

Fixes #6107
@ui5-webcomponents-react-bot
Copy link
Contributor

🎉 This issue has been resolved in version v1.29.5 🎉

The release is available on v1.29.5

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: 🆕 New
Development

No branches or pull requests

3 participants