Webkit Scrollbar on calcite panel

[BobCowling2]

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

[KittyHurley]

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:

<style>
calcite-action-bar {
  overflow-y: auto;
}
</style>

  <calcite-shell>
    <calcite-shell-panel slot="primary-panel" position="start" detached>
      <calcite-action-bar slot="action-bar">
        <calcite-action text="Add" active icon="plus"></calcite-action>
        <calcite-action text="Save" disabled icon="save"></calcite-action>
        <calcite-action text="Layers" icon="layers"></calcite-action>
        <calcite-action slot="bottom-actions" text="Tips" icon="lightbulb"></calcite-action>
      </calcite-action-bar>
    </calcite-shell-panel> 
  </calcite-shell>

[BobCowling2]

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

[KittyHurley]

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?

[BobCowling2]

@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?

[KittyHurley · Accepted solution]

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.

<style>
.calcite-panel-contents {
  overflow-y: auto;
  display: block;
  height: 100vh;
}

::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa;
}
::-webkit-scrollbar-thumb {
  background: #000;
}
</style>

<calcite-shell content-behind>
    <calcite-shell-panel slot="primary-panel" detached>
      <calcite-panel heading="Panel Header Name">
        <div class="calcite-panel-contents">
        ... calcite-panel contents ...
      </calcite-panel>
    </calcite-shell-panel>
</calcite-shell>

[TomSellsted]

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

[EricErtl]

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!

[KittyHurley]

@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.

[KittyHurley]

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