Webkit Scrollbar on calcite panel

156
5
Jump to solution
05-03-2022 01:45 PM
Labels (2)
BobCowling2
New Contributor II

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

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
Kitty-Hurley
Esri Contributor

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>

 

 

View solution in original post

5 Replies
Kitty-Hurley
Esri Contributor

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>

 

0 Kudos
BobCowling2
New Contributor II

Hello @Kitty-Hurley 

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

0 Kudos
Kitty-Hurley
Esri Contributor

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?

0 Kudos
BobCowling2
New Contributor II

@Kitty-Hurley 

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?

0 Kudos
Kitty-Hurley
Esri Contributor

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>