I have below AG Grid table wrapper in Svelte project. I have 2 pinned columns on left adn right side and have 5-6 columns in between which are not pinned and scrollable in x direction. I can Scoll using mouse but do not see the scrollbar. How can see the scrollbar again.

<div bind:this={gridContainer} class="ag-theme-alpine grid-container"></div>

<style>
    :global(.grid-container)  {
        width: 100%;
        height: 100%;
    }
    :global(.ag-center-cols-viewport) {
        overflow-x: auto !important; // tried "scroll" as well
        overflow-y: hidden !important;
    }

I have below AG Grid table wrapper in Svelte project. I have 2 pinned columns on left adn right side and have 5-6 columns in between which are not pinned and scrollable in x direction. I can Scoll using mouse but do not see the scrollbar. How can see the scrollbar again.

<div bind:this={gridContainer} class="ag-theme-alpine grid-container"></div>

<style>
    :global(.grid-container)  {
        width: 100%;
        height: 100%;
    }
    :global(.ag-center-cols-viewport) {
        overflow-x: auto !important; // tried "scroll" as well
        overflow-y: hidden !important;
    }

• css
• user-interface
• scrollbar
• ag-grid
• ag-grid-column

1 Answer 1

CSS example on this matter from a previous question: How to always show the horizontal scroll bar in ag-grid?

In there is a css example of how it could work for you, however you could also play around with the alwaysShowHorizontalScroll from the AG-Grid grid options AG-Grid Grid Options Docs

If that doesn't solve it, in the grid options add suppressHorizontalScroll: false to see if your horizontal bar is hidden due to possible settings within your own gridoptions