padding on grid header

[Bob]

Hi all,

I want horizontal scrolling for grids because my users can dynamically add columns and work with data before exporting to Excel for further analysis.  This also gets me round the problem of wide grids on a small screen.
I DO NOT want vertical scrolling as my users scroll with the browser and grid scrolling has caused no end of confusion when I have installed it.
I therefore set up my grid as follows:

The grid header is now rendered with 16px padding which throws out the alignment of all columns with the header.  It looks like the padding has been added by flex and I am unable to overwrite.  I can manually modify right padding to 0px in the console and all is great.

I DO NOT want to set a height for my grid and force a scroll bar so the content lines up by having a scroll bar.
I have tried setting a maxHeight in the hope that if the max height was not met the grid would remove the padding because it was not applying the scroll bar.  No luck.  Setting a max height implements padding and throws column alignment out when it does not apply a scroll bar (go figure)...

I have tried various bits of CSS to remove the padding to no avail.

This would be a global setting as this is how I want all of my grids to behave.
The following global settings are defined in styles.css (I implement a grid wrapper and spinner across all grids).

How do I remove the padding to align my columns when I do not want vertical scrolling?

Cheers,
Bob

[Martin Bechev]

Hello Bob,

Thank you for the provided details on this case.

In general, when setting the scrollable option to true scrollbars will appear. 

In order to hide the vertical scrollbar and the mentioned padding, the developer can utilize custom CSS styles. Indeed setting padding to 0 is the right way to go, but I am not sure if using #grid in the selector will correctly target the desired Grid. Also in order to remove the scrollbar overflow-y: hidden could be set to completely remove the scrollbar and rely on the browser scrollbar.

Here is an example where the vertical scrollbar is removed and the styles are applied only for the current Grid:

      .my-grid .k-grid-content {
        overflow-y: hidden;
      }

      .my-grid .k-grid-header {
        padding: 0px !important;
      }

https://stackblitz.com/edit/angular-u2rqbt

Please make sure to set the encapsulation to ViewEncapsulation.None in case the styles are set locally as in this case.

I hope this helps. Let me know if you have any further questions.

Regards,

Martin
Progress Telerik

[Bob]

Hi Martin,

Perfect answer, thanks.
I set all grids to scrollable:

[scrollable]="'scrollable'"

Then the following styles in my global styles.css sheet give me exactly the behaviour I want:

  .k-grid-content {
    overflow-y: hidden;
  }
  .k-grid-header {
    padding: 0px !important;
  }

Thanks for your help.
Cheers,
Bob