nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Vind meer berichten getagd met

Components

Documentation

Accepted answers

KittyHurley

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>

All comments

KittyHurley

@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

EricErtl

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.

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

TomSellsted

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

TomSellsted

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!

MM.zip

KittyHurley

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

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

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

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

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>

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.