Custom Scrollbar CSS

[andy-bond]

Please describe the feature you would like to request.

I would like to be able to specify a class on the pbl-ngrid component that can add scrollbar css to the appropriate child node when the table loads. If it can't be added as a CSS class, passing it to an Input property would also be fine.

What is the use-case or motivation for this proposal?

For custom scrollbar css to be easily added.

Is there anything else we should know?

Example of custom scrollbar CSS:

.scrollbar::-webkit-scrollbar-track {
  background-color: rgba(128, 128, 128, .5);
}

.scrollbar::-webkit-scrollbar {
  width: 6px;
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #ff4081;
}

.scrollbar::-webkit-scrollbar-corner {
  background-color: #424242;
}

.scrollbar::-webkit-resizer {
  background-color: #424242;
}

[shlomiassaf]

This is quite easy to achieve...

The scrollbar container inside the grid has the css class pbl-ngrid-scroll-container

Let's define the class with-custom-scrollbar that if set on the grid's element will trigger a custom scrollbar style:

pbl-ngrid.with-custom-scrollbar {
  .pbl-ngrid-scroll-container::-webkit-scrollbar-track {
    background-color: rgba(128, 128, 128, .5);
  }

  .pbl-ngrid-scroll-container::-webkit-scrollbar {
    width: 6px;
  }

  .pbl-ngrid-scroll-container::-webkit-scrollbar-thumb {
    background-color: #ff4081;
  }

  .pbl-ngrid-scroll-container::-webkit-scrollbar-corner {
    background-color: #424242;
  }

  .pbl-ngrid-scroll-container::-webkit-resizer {
    background-color: #424242;
  }
}

Note that this must be on a style file not bound to any component, or if bound, the component is used ViewEncapsulation.None

Now in the grid

<pbl-ngrid class="with-custom-scrollbar"></pbl-ngrid>

You can see it working in the following stackblitz

https://stackblitz.com/edit/pebula-ngrid-starter-custom-scrollbar?file=app/app.component.html

[andy-bond]

Thanks for your in-depth answer! I had tried overriding a few different things but must have missed that class. Thanks again!