[List]: Text is truncated in ListItemGroup

[wilson-xu-sap]

Describe the bug

Title and text is still truncated. It doesn't seem that there exist a way setting the wrappingmode. https://github.com/SAP/ui5-webcomponents/issues/9745

Isolated Example

https://sap.github.io/ui5-webcomponents-react/v2/?path=/story/data-display-list--list-item-group-story

Reproduction steps

1.try adding content in group header and content

Expected Behaviour

not truncated

Screenshots or Videos

No response

UI5 Web Components for React Version

2.10.1

UI5 Web Components Version

2.10.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

SF

Declaration

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

[Lukas742]

Hi @wilson-xu-sap

please clarify what the intend of the issue is. Am I correct in my assumption that you want to request a feature that enables the option of wrapping the text inside the ListItemGroup header text?

[wilson-xu-sap]

Hi @Lukas742 Not only the title in ListItemGroup, but also the text in ListItemCustom.

[wilson-xu-sap]

BTW, if we use header in ListItemGroup instead of headertext, it will be overlapped with content.

[Lukas742]

@wilson-xu-sap thanks for the clarification!

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

[kineticjs]

Hi @SAP/ui5-webcomponents-topic-p ,

Recently we added text wrapping support to the standard list-items (ListItemStandard), but now we have a request to support the same for the ListItemGroup, see the provided example above.

[plamenivanov91]

Internal Reference: BGSOFUIPIRIN-6871

[dobrinyonkov]

Hi @wilson-xu-sap,

Thank you for the feature request.

ui5-li-custom is intentionally designed as a generic container to provide maximum flexibility. Adding built-in wrapping would limit this flexibility and go against its core purpose.

For handling long text in custom list items, we recommend using ui5-expandable-text at the application level:

<ui5-li-custom>
  <div class="custom-item">
    <ui5-expandable-text max-characters="120" text="Your long text..."/>
  </div>
</ui5-li-custom>

This approach gives you full control over text expansion behavior while keeping ui5-li-custom generic. You can see this pattern in our List Wrapping Behavior sample (currently in PR https://github.com/SAP/ui5-webcomponents/pull/12011)

The ListItemGroup part of this requests is still in progress.

[github-actions[bot]]

This issue has been closed. To reopen, just leave a comment!

[ui5-webcomponents-bot]

:tada: This issue has been resolved in version v2.13.0 :tada:

The release is available on v2.13.0

Your semantic-release bot :package::rocket: