How do I create a scroll bar in facets?

Search Search UI React
1

Hi Team,

When I’m using Facets with showMoreLimit, I cannot see the scroll bar appearing, and the rest of the items are hidden. I added a custom container {{standardFacetsContainer: "customContainer"}} and did overflow:scroll in my CSS, but this is hiding the show more button as it is going inside the showFacetsContainer. How do I achieve this functionality?

Thanks,
Rakesh

2

Hi Rakesh,

If you add max height and overflow styling to the standardFacetsContainer style field, then you should be able to produce your desired behavior (NOTE: the button is expected to be inside the custom container div). See the example below:

<StandardFacets
  showMoreLimit={5}
  customCssClasses={{
    standardFacetsContainer: "max-h-screen overflow-scroll customContainer" }}
/>

Hope this helps!