►HowTo◄ Remove "ghost" scroll bars on grids

Jaymer

Here's a simple Grid:
Screen Shot 2019-05-06 at 11.16.32 AM.png
Notice the non-functioning, disabled scroll bar. It doesn't work because the Paging system is active, yet its there taking up room.
Now, expand the row:

Now we have 2 scrollbars in the display that are not needed.

The solution is not a render script to alter Kendo, but
a simple CSS class.

Even if you don't know the 1st thing about CSS, you can still implement this tweak.

First, in your Grid Query, make your CSS Class Property for the grid look like this:
Screen Shot 2019-05-06 at 11.28.33 AM.png

--> jaymerTip

Jaymer

In your CSS file for your app,
add the following lines:

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

Once you have saved your CSS, you'll need to tell your browser to re-load files from the source because the older CSS file will be in cache, so just hold down the SHIFT key while you click the "Reload this page" icon in your browser toolbar.

Your grid should look cleaner now:
Screen Shot 2019-05-06 at 11.19.05 AM.png

Jaymer

and a few more simple tweaks.

Background Color
Screen Shot 2019-05-06 at 11.20.22 AM.png
to add a background color so that the expanded area "jumps out" of the screen a little bit more, add "linesbg" (for lines background) to the same CSS Class Property in aware. So that it reads "linesbg no_v_scroll" or "no_v_scroll linesbg" (the order isn't important).

then add this to your CSS:

.linesbg .k-detail-row {
    background-color: #ddffff!important;
}

NOTE: this is only going to change the color FOR THE GRID where you add this Class. It won't mess up your entire application.

Tighter Line Spacing
You can also tighten up the row-spacing. Mark created "thinrows" long ago, but I wanted them even tighter, so I use 'thinnerrows". Likewise, add this to the CSS Class Property of any grid. This is what I currently use in my apps:

.thinnerrows .k-grid-content > table > tbody > tr > td > .k-button
{
	padding-top:0px;
	padding-bottom:0px;
	line-height:.35cm;
}

Jaymer

Really surprised no one has commented on even trying this! Works great.

Jhstephenson

Jaymer, I just found this tip and it works great.

BLOMASKY

That is because ALL your tips work great, so it is just assumed!

Bruce

p.s. you da man!

lueu

Thanks for this great How to! Tried it, and it worked perfectly! 🙂

But - I was wondering if it would be possible to do something similar to remove the outer scrollbar? For query results with many rows I would like to use the Stretch grid to the bottom, since this gives the sticky effect on the column headers. In this case I need the inner scrollbar, but now I have an outer one that makes no sence.