After Data grid update to 1.3.0 horizontal scrollbars reappear

General
1

I wanted to remove the horizontal scroll bar on data grids.

I opened (How can I remove horizontal scrollbars from a datagrid )

which gave me this solution:
To hide horizontal scrolling:

  1. Go to the Theme tab and select Extensions.
  2. Click on the green button “+ New Extension” and create a new extension with any name (for example, dataGrid)
  3. Add the code below, it will be saved automatically.

.ag-body-horizontal-scroll {
display: none !important;
}

but after updating the data grid from 1.2.0 to 1.3.0 some of my data grids show with the scroll bar and some do not.

image
image786×483 4.85 KB

about half of my data grids have this issue.

Thanks,
H

2

Hello @hharrington

Try to use this:

.ag-center-cols-viewport {
    overflow-x: hidden;
}

But we will create an internal ticket to find a better solution.

Regards,
Inna

3

Thanks for the response,

should I use this with

ag-body-horizontal-scroll {
display: none !important;
}
or in place of it.

also what is the down side to using
.ag-center-cols-viewport {
overflow-x: hidden;
}

If you are looking for a better solution that implies this one is sub optimal. Any details would be really helpful.

Thanks,
H

4

Hello @hharrington
It’s hard to say why horizontal scrolling reappeared.

.ag-body-horizontal-scroll {
  display: none !important;
}

:arrow_up: This solution should have disabled horizontal scrolling anyway.
If the solution proposed by Inna works, you can use it.

5

Its really weird. Some datagrids have the scrollbar and others do not.

I know if I have enough data to force a vertical scrollbar then no horizonal scrollbar is shown. but if there is no data or only a couple lines of data (not needing a vertical scrollbar ) some data grids show it and others don’t

my extension

image

two tables side by side

image
image761×433 3.77 KB

here is an empty data grid with no scrollbar
image

here is a data grid just below the one above (on the same page )

image

using both snippets

image

I am still seeing the same issue.

image

H

6

@hharrington I am happy to inform you that I finally understood why the scrollbar didn’t disappear, in fact, the solution proposed by Inna should work, you just have to add !important
And the solution should look like this:

.ag-center-cols-viewport {
    overflow-x: hidden !important;
}