topic Re: Webkit Scrollbar on calcite panel in Calcite Design System Questions

Webkit Scrollbar on calcite panel

BobCowling2 — Tue, 03 May 2022 20:45:45 GMT

I am trying to style a Calcite shell panel with a Webkit scrollbar using CSS and it is not working. It works on other sections of the page but the scrollbar on the calcite panel does not change. Does anyone have an idea of what to do this?

Thanks

Re: Webkit Scrollbar on calcite panel

KittyHurley — Tue, 03 May 2022 22:48:30 GMT

Hello @BobCowling2, are you aiming to add a scrollbar to accommodate items contained in the calcite-shell-panel, such as the calcite-action-bar? If so you could add CSS to the calcite-action-bar:

Re: Webkit Scrollbar on calcite panel

BobCowling2 — Wed, 04 May 2022 00:22:47 GMT

Hello @KittyHurley

Thank you for the reply. I am simply trying to style the scrollbar using webkit. https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

The CSS seems to work on other elements such as the esri pop-up but not the calcite-shell-panel

Re: Webkit Scrollbar on calcite panel

KittyHurley — Wed, 04 May 2022 14:01:04 GMT

Hi @BobCowling2, I would still recommend the same method in adding the ::webkit-scrollbar to the calcite-action-bar with the code from the previous answer and additional CSS from the doc page provided.

The calcite-shell-panel contains the calcite-action-bar tool group, so it is recommended to add a scrollbar to the calcite-action-bar.

Here's a Codepen with the CSS additions.

calcite-action-bar { overflow-y: auto; display: block; overflow: auto; height: 100vh; } calcite-action-bar::-webkit-scrollbar { width: 5px; height: 8px; background-color: #aaa; } calcite-action-bar::-webkit-scrollbar-thumb { background: #000; }

Otherwise if you are aiming for something different, could you provide a code sample or Codepen, that reproduces the issue?

Re: Webkit Scrollbar on calcite panel

BobCowling2 — Wed, 04 May 2022 18:09:54 GMT

@KittyHurley

I'm very sorry. Calcite design system is very new to me but I am giving it a try. You are correct that is the solution. Sadly. I made a mistake and I am not using action-bar. I am following this tutorial here: https://developers.arcgis.com/calcite-design-system/tutorials/core-concepts/

Where it is using different components to create the floating sidebar.

<calcite-shell content-behind class="calcite-tutorial"">
<calcite-shell-panel slot="primary-panel">
<calcite-panel>

Would you happen to be able to tell the correct CSS for that?

Re: Webkit Scrollbar on calcite panel

KittyHurley — Wed, 04 May 2022 19:38:41 GMT

Ah, yes, thanks for the reference. For calcite-panel content you could add a div between the calcite-panel and its contents. Then add some CSS to the div. Here's a new Codepen instance with the tutorial as an example.

Re: Webkit Scrollbar on calcite panel

TomSellsted — Wed, 14 Dec 2022 22:46:08 GMT

Greetings,

I am also trying to do this and I am stuck. Inspecting the scrollbar I find that the class .content-wrapper is set to auto and I can't figure out a way to make it hidden. When I update it to hidden in the debugger the large scrollbar to the left disappears.

Any thoughts on how I override the .content-wrapper class?

Thanks very much!

Regards,

Tom

Re: Webkit Scrollbar on calcite panel

KittyHurley — Thu, 15 Dec 2022 18:37:23 GMT

@TomSellsted Can you post a Codepen or code sample for troubleshooting?

Re: Webkit Scrollbar on calcite panel

TomSellsted — Thu, 15 Dec 2022 19:39:07 GMT

Thanks very much for the quick response! Here is the code. I wanted you to see all of it as I may have something that may be interfering in some way with the scrolling.

Thanks very much!

Re: Webkit Scrollbar on calcite panel

TomSellsted — Wed, 28 Dec 2022 22:58:09 GMT

Kitty,

You may have heard me smack my forehead... I figured out my issue. I was trying to set the class on the panel and not the actual contents. Once I was setting it correctly it is working perfectly.

Regards,

Tom

Re: Webkit Scrollbar on calcite panel

KittyHurley — Wed, 28 Dec 2022 23:01:35 GMT

It happens to the best of us, no worries. Glad to hear you got it working!

Re: Webkit Scrollbar on calcite panel

EricErtl — Sat, 25 Feb 2023 21:07:56 GMT

Hello. I am having similar issues with trying to restyle a scrollbar. All scrollbars in the application are styled how I want them except the popup container. The change happened when upgrading from 4.24 to the 4.25 JS API. Any ideas on why the popup container is the only item in the app that does not style correctly? I appreciate any help! Thanks.

Re: Webkit Scrollbar on calcite panel

KittyHurley — Sun, 26 Feb 2023 19:56:49 GMT

@EricErtl Can you post a Codepen or code sample for troubleshooting?

As a side note, if using Calcite with a specific JavaScript Maps SDK version, we recommend using the same Calcite version coupled with the JavaScript Maps SDK release. For instance:

ArcGIS Maps SDK for JavaScript version	Calcite version
4.24	beta.82
4.25	beta.97
4.26	1.0.7

Re: Webkit Scrollbar on calcite panel

EricErtl — Fri, 02 Jun 2023 15:31:57 GMT

Hi @KittyHurley,

This solution worked great for a calcite panel but was curious if there was a way to do this will other components such as the popup? I cannot override the popup panel, select, or combobox drop down scroll bars. Could this be added as an ArcGIS Idea for Calcite Design System or is it not feasible? Really not the biggest deal but when everything is styled nicely and then you have the big bulky default scrollbar (especially in dark mode) it throws it off. Thanks!

Re: Webkit Scrollbar on calcite panel

KittyHurley — Fri, 02 Jun 2023 20:13:13 GMT

@EricErtl The popup would be related to the Maps SDK for JavaScript, so is out of the scope of Calcite.

As for adopting as part of Calcite in the future, the ::webkit-scrollbar is a non-standard feature and doesn't have compatibility across browsers, including Firefox (desktop and mobile) and Safari on iOS.

Calcite aims to support the last two versions of Chrome, Firefox, Safari and Edge, and as of the non-standard feature would not pursue an enhancement at this time.