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

[SF][Timeline]: [Long Text Overflow] #10303

Open
1 task done
Jasonl157 opened this issue Dec 4, 2024 · 2 comments · May be fixed by #10483
Open
1 task done

[SF][Timeline]: [Long Text Overflow] #10303

Jasonl157 opened this issue Dec 4, 2024 · 2 comments · May be fixed by #10483
Assignees
@hinzzx
Labels
bug This issue is a bug in the code Medium Prio TOPIC B

Comments

@Jasonl157
Copy link

Jasonl157 commented Dec 4, 2024 •
edited
Loading

Describe the bug

Long text in Timeline component will overflow

Isolated Example

https://stackblitz.com/edit/github-b3bzxd-mwydkb?file=src%2FApp.tsx

Reproduction steps

  1. Open the Isolated Example
  2. Make sure the window size is smaller than the text length

Expected Behaviour

Long text should either wrap or be truncated

Screenshots or Videos

image

UI5 Web Components for React Version

2.4

UI5 Web Components Version

2.4

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

  • I’m not disclosing any internal or sensitive information.
@Jasonl157 Jasonl157 added the bug This issue is a bug in the code label Dec 4, 2024
@Lukas742
Copy link
Collaborator

Lukas742 commented Dec 4, 2024 •
edited
Loading

Hi @Jasonl157

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,

here you can find an example of the behavior, without our wrapper or React: https://stackblitz.com/edit/github-5aqstd?file=index.html,main.js

It seems like it's the same as this closed issue. Please feel free to close this one as duplicate and reopen the other one.

@Lukas742 Lukas742 transferred this issue from SAP/ui5-webcomponents-react Dec 4, 2024
@hinzzx hinzzx self-assigned this Dec 5, 2024
@hinzzx
Copy link
Contributor

hinzzx commented Dec 5, 2024

Hi colleagues @SAP/ui5-webcomponents-topic-b ,

There seems to be an issue with the text truncation within our Timeline Item's subtitle text provided by our subtitle-text property (subtitle-text reported, but check title, name and other text providing properties as well).

A possible solution would be leveraging the word-break: break-word or word-break: break-all CSS Property. We can discuss which one works best for us offline.

Best Regards,
Stoyan

@hinzzx hinzzx removed their assignment Dec 5, 2024
@hinzzx hinzzx self-assigned this Jan 6, 2025
@hinzzx hinzzx moved this from New Issues to In Progress in Maintenance - Topic B Jan 6, 2025
@hinzzx hinzzx linked a pull request Jan 7, 2025 that will close this issue
Draft
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@hinzzx hinzzx

Labels
bug This issue is a bug in the code Medium Prio TOPIC B
Projects
Maintenance - Topic B
Status: In Progress
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(ui5-timeline-item): correct wrapping on long text SAP/ui5-webcomponents
3 participants
@Lukas742 @hinzzx @Jasonl157