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.

Sign up for GitHub

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

Jump to bottom

[Page]: Floating footer layout issue #10358

Closed
1 task done
LukewenSAP opened this issue Dec 10, 2024 · 3 comments · Fixed by #10496
Closed
1 task done

[Page]: Floating footer layout issue #10358

LukewenSAP opened this issue Dec 10, 2024 · 3 comments · Fixed by #10496
Assignees
@nikoletavnv
Labels
bug This issue is a bug in the code Medium Prio released TOPIC RL

Comments

@LukewenSAP
Copy link

Describe the bug

In Page component, when use floating footer, there will be 2 background, see screenshot below:
image

Isolated Example

https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/layouts-floorplans-page--docs

Reproduction steps

...

Expected Behaviour

No response

Screenshots or Videos

No response

UI5 Web Components for React Version

2.5.0

UI5 Web Components Version

2.5.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.
@LukewenSAP LukewenSAP added the bug This issue is a bug in the code label Dec 10, 2024
@Lukas742
Copy link
Collaborator

Lukas742 commented Dec 11, 2024 •
edited
Loading

Hi @LukewenSAP

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

Hi Colleagues,

if a Bar is slotted without being wrapped by a div, the layout breaks. Additionally, when wrapped the inline borders are cut off which you can see in your playground as well: https://sap.github.io/ui5-webcomponents/components/fiori/Page/

https://stackblitz.com/edit/github-uwhhf8d8-zzorhnhv?file=index.html%3AL137

This issue describes the same problem as #9756 . It seems that the fix didn't account for slotting the Bar directly.

@Lukas742 Lukas742 transferred this issue from SAP/ui5-webcomponents-react Dec 11, 2024
@Lukas742 Lukas742 mentioned this issue Dec 11, 2024
Merged
Lukas742 added a commit to SAP/ui5-webcomponents-react that referenced this issue Dec 11, 2024
@Lukas742
docs(Page): nest footer in div (#6728)
6388975 
Related issue: SAP/ui5-webcomponents#10358
@plamenivanov91
Copy link
Contributor

Hello @SAP/ui5-webcomponents-topic-rl ,

The issues are easily reproducible on the provided links.

Could you please take over?

Regards,
Plamen Ivanov

@ndeshev ndeshev self-assigned this Dec 16, 2024
@ndeshev ndeshev moved this from New Issues to In progress in Maintenance - Topic RL Dec 16, 2024
@ndeshev ndeshev removed their assignment Jan 6, 2025
@ivoplashkov ivoplashkov moved this from In progress to New Issues in Maintenance - Topic RL Jan 6, 2025
@nikoletavnv nikoletavnv moved this from New Issues to In progress in Maintenance - Topic RL Jan 7, 2025
@nikoletavnv nikoletavnv self-assigned this Jan 7, 2025
nikoletavnv added a commit that referenced this issue Jan 8, 2025
@nikoletavnv
fix(ui5-page): fix floating footer layout
3de77dc 
When ui5-bar is displayed in the page footer, the footer looks duplicated.
This fix resets the paddings of the slotted ui5-bar when footer is floating.

Fixes: #10358
@nikoletavnv nikoletavnv mentioned this issue Jan 8, 2025
Merged
@github-project-automation github-project-automation bot moved this from In progress to Completed in Maintenance - Topic RL Jan 21, 2025
@ui5-webcomponents-bot
Copy link
Collaborator

🎉 This issue has been resolved in version v2.7.0-rc.1 🎉

The release is available on v2.7.0-rc.1

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@nikoletavnv nikoletavnv

Labels
bug This issue is a bug in the code Medium Prio released TOPIC RL
Projects
Maintenance - Topic RL
Status: Completed
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(ui5-page): fix floating footer layout SAP/ui5-webcomponents
6 participants
@ndeshev @Lukas742 @plamenivanov91 @nikoletavnv @ui5-webcomponents-bot @LukewenSAP