search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.5k stars 258 forks source link

ui5-tree-item-custom content div width #7483

Closed Sergey-Shapovalov closed 10 months ago

Sergey-Shapovalov commented 1 year ago

Bug Description

When using the ui5-tree-item-custom component, the content slot elements are placed into the ui5-li-tree-text-wrapper div. In the earlier versions (at least in the 1.10 version) the wrapper div had a set of styles, including display: flex and width: 100%. It allowed to have the tree item content across the whole item, placing some elements to the right etc.

In the latest couple of versions the styling has disappeared. As a result, the item content is condensed in the left part of the item.

The old (correct) and new (incorrect) behaviors are displayed in the attached pictures.

Affected Component

ui5-tree-item-custom

Expected Behaviour

It should be possible to use the whole width of the custom tree item to position custom content elements. Probably the ui5-li-tree-text-wrapper div styling should be returned.

Isolated Example

https://codesandbox.io/s/ui5-webcomponents-forked-w8rth3

Steps to Reproduce

  1. Create a ui5-tree instance
  2. Add one or more ui5-tree-item-custom items
  3. Place a flex div into the content slot of the tree items, trying to display some content in the right part of the tree item.

Log Output, Stack Trace or Screenshots

The correct behavior: image

The incorrect behavior: image

Priority

None

UI5 Web Components Version

1.16.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

yanaminkova commented 1 year ago

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

Could you please have a look at this issue?

Thanks and Regards, Yana

Sergey-Shapovalov commented 1 year ago

I'm afraid the additionalText property wouldn't solve the issue. The whole idea of the custom tree item component is to allow user-defined layout. In my case the item layout includes several fixed-width right-aligned columns. And that used to work in earlier versions of UI5 Web Components.