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

Tree: Style issue - CSS Height is being ignored #2545

Closed
jbjhjm opened this issue Dec 4, 2020 · 0 comments · Fixed by #2546
Closed

Tree: Style issue - CSS Height is being ignored #2545

jbjhjm opened this issue Dec 4, 2020 · 0 comments · Fixed by #2546
Assignees
Labels

Comments

@jbjhjm
Copy link

jbjhjm commented Dec 4, 2020

Describe the bug
For large trees, users may want to limit the height and make the tree scrollable.
Currently, setting height or max-height on ui5-tree will not work, because ui5-list ignores the set height and will overflow it's parent element.

Looks like the reason for this is that the child ui5-list ignores its parent's height.
(setting overflow:auto on ui5-tree would not work well because ui5-list is set to overflow:auto, too, which would create a second scrollbar.)

I tried to fix this by using addCustomCss, but I'm afraid this does not work. Possibly because it is another webcomponent with it's own shadow dom:

addCustomCSS("ui5-tree", `ui5-list { height:100% }`);

To reproduce
Create a ui5-tree with many entries and limit the height using css.

Expected behavior
ui5-list should not be higher than it's parent/should not overflow it.
It's maximal height within ui5-tree should be 100%.

Screenshots
If applicable, add screenshots to help explain your problem.

Context

  • UI5 Web Components: 1.0.0rc10
  • OS/Platform: Win 10
  • Browser (if relevant): Chrome 87
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants