Dialog Scrollbar Size Issue

[gopusrikanth04]

Bug Description

1. change the scroll bar size to the Dialog

To reproduce
Steps to reproduce the behavior:

1. Create a ui5-dialog
2. Add style to the dialog height: 600px
3. Apply Style to the diaog: "--sapScrollBar_Dimension": "7px"
   ::-webkit-scrollbar {
   width: 7px !important;
   height: 7px !important;
   }

Isolated example
https://codesandbox.io/s/wispy-leaf-ljisu?file=/src/App.js

Expected behavior
Dialog Scroll bar width is small

Screenshots

Context

• UI5 Web Components version 1.0.0-rc.10
• OS/Platform: Win 10
• Browser (if relevant): Chrome Version 88.0.4324.192 (Official Build) (x86_64)
• Other information: None

Priority:(optional) (Low, Medium, High or Very High)
Very High

Business impact: (mandatory for "Very High")

[terezamch]

Hello colleagues,

First of all, the scrollbar in the Dialog is not implemented fully by the spec - as I can see the width of it is wrong.

More over, I can see that non of the pseudo elements are working in the style attribute of the components, so the app developer cannot himself set the correct (by spec) width.

I also checked that when setting the following styles in the shadow root, the styles are applied

Please, check the spec and decide if and how to handle the pseudo elements on the components (maybe decision about the topic should be on a global level).

Thanks and best regards,
Tereza

[gopusrikanth04]

Hello Tereza Chobanova,

This is regarding to bug #2887

i didnt get you actually .
I have a requirement where i need to set styles to scrollbar as mentioned in the bug.
we are able to set the style to scrollbar in rest of the components except for dialogs and popovers.

as its being the shadow element we are able to set the style to dialog.

how can we achieve this.

[terezamch]

Hello @gopusrikanth04 ,

Unfortunately, you cannot achieve it as now there is no possibility to add styles with pseudo elements in the dialog.
I have forwarded the issue to the responsible team.

Regards,
Tereza

[ilhan007]

Hello @terezamch, just fyi, to forward the issue to the responsible team you have to change the Projects to "Maintenance - Topic RD",
from the settings, that stay to the right of the issue description, and by mentioning the responsible team in a comment by its github group name, so they know about this issue.

I already did it. BR, ilhan.

[ilhan007]

Hello @SAP/ui5-webcomponents-topic-rd this incident has been forwarded to you.

[ilhan007]

Hello @gopusrikanth04 in the next release (RC.14) or with "next" tag version that will come out in few days, you will be able to customize the scrollbar as follows

<ui5-dialog id="msg-dialog" header-text="Message dialog" style="--sapScrollBar_Dimension: 20px">

Check out the change #3067 to see what CSS Variables are exposed.

[gopusrikanth04]

Thank You ilhan orhan. Will it be applied to both horizontal and vertical scrollbar? Let's say I have a horizontal scrollbar for dialog then applying --sapScrollBar_Dimension will be applied to the height of the scrollbar or to the width of the scroll bar. As for the horizontal scrollbar it should be applied to height property and for vertical scrollbar it should be applied for width. make me correct if i'm wrong. Thanks and regards Srikanth Gopu

…

On Thu, Apr 1, 2021 at 12:17 PM ilhan orhan ***@***.***> wrote: Hello @gopusrikanth04 <https://github.com/gopusrikanth04> in the next release (RC.14) or with "next" tag version that will come out in few days, you will be able to customize the scrollbar as follows <ui5-dialog id="msg-dialog" header-text="Message dialog" style="--sapScrollBar_Dimension: 20px"> Check out the change #3067 <#3067> to see what CSS Variables are exposed. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2887 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALH5DYJP53IT7F43G6RRAULTGQJJNANCNFSM4YMISOVA> .

-- Thanks and Best Regards, *Srikanth Gopu*

[ilhan007]

@TeodorTaushanov could you answer the question by @gopusrikanth04

[TeodorTaushanov]

Hi @gopusrikanth04,

--sapScrollBar_Dimension will be applied to the width or to the height depending on the scrollbar orientation.

::-webkit-scrollbar:horizontal {
height: var(--sapScrollBar_Dimension);
}

::-webkit-scrollbar:vertical {
width: var(--sapScrollBar_Dimension);
}

Best,
Teo