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.57k stars 267 forks source link

Slider labels cause a horizontal scrollbar #9908

Open brandon-sap opened 1 month ago

brandon-sap commented 1 month ago

Bug Description

The issue varies depending on the particulars of min, max, and label-interval. Maybe some other things on occasion.

Additional notes:

From inspecting the makeup of the web component in its shadow DOM, the cause is that the labels are made to take up more than 100% of the width. For my case, I have a slider with min=1, max=4, label-interval=1. With this, there are 4 labels, each getting 33.3333% of the space. Then the element is moved with a left: -16.6667%. This makes sense, and lines the labels up with the tick marks correctly, but it still creates an element that takes up more than 100% of the space available.

I also noticed that the tick marks are similarly correctly spaced, but they are done with a different mechanism. They use display: flex and then justify-content: space-between. This has the same effect without creating an element that takes up too much space. I think it would make sense to use the same construct for the labels.

Along those lines, I think it makes sense, when you have 2 things like this that aren't directly connected and need to line up, to use the same mechanism for alignment. So between the ticks and their labels, constructing them in the same way would make sense. And the display: flex; justify-content: space-between definitely works better than the percent widths and sliding the element left. Just my 2 cents.

Affected Component

Slider

Expected Behaviour

No scrollbar. When width is set to 100%, the slider should take all the space and not cause a horizontal scrollbar.

Isolated Example

Playground Example

Steps to Reproduce

playground example

  1. Go to the isolated example, observe scrollbar.

The docs also have the same issue, here: https://sap.github.io/ui5-webcomponents/components/Slider/#more-samples

  1. The first example has 2 sliders in it. One causes the scrollbars.

Log Output, Stack Trace or Screenshots

No response

Priority

Low

UI5 Web Components Version

2.2.0

Browser

Chrome

Operating System

Windows 11

Additional Context

No response

Organization

SAP

Declaration

IlianaB commented 1 month ago

Hello @SAP/ui5-webcomponents-topic-rl , please have a look at this issue about Slider. When width is set to 100%, the slider should take all the space and not cause a horizontal scrollbar.

Regards, Iliana