►HowTo◄ Remove "ghost" scroll bars on grids

If you have questions or if you want to share your opinion about Aware IM post your message on this forum
Post Reply
Jaymer
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

►HowTo◄ Remove "ghost" scroll bars on grids

Post by Jaymer »

Here's a simple Grid:
Screen Shot 2019-05-06 at 11.16.32 AM.png
Screen Shot 2019-05-06 at 11.16.32 AM.png (37.93 KiB) Viewed 8010 times
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:
Screen Shot 2019-05-06 at 11.16.55 AM.png
Screen Shot 2019-05-06 at 11.16.55 AM.png (29.22 KiB) Viewed 8010 times
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
Screen Shot 2019-05-06 at 11.28.33 AM.png (9.22 KiB) Viewed 8009 times
--> jaymerTip
Last edited by Jaymer on Sun Nov 17, 2019 9:46 pm, edited 3 times in total.
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
Jaymer
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: ►HowTo◄ Remove "ghost" scroll bars on grids

Post by Jaymer »

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

Code: Select all

.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
Screen Shot 2019-05-06 at 11.19.05 AM.png (32.94 KiB) Viewed 8009 times
Last edited by Jaymer on Mon May 06, 2019 3:35 pm, edited 1 time in total.
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
Jaymer
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: ►HowTo◄ Remove "ghost" scroll bars on grids

Post by Jaymer »

and a few more simple tweaks.

Background Color
Screen Shot 2019-05-06 at 11.20.22 AM.png
Screen Shot 2019-05-06 at 11.20.22 AM.png (36.81 KiB) Viewed 8008 times
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:

Code: Select all

.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:

Code: Select all

.thinnerrows .k-grid-content > table > tbody > tr > td > .k-button
{
	padding-top:0px;
	padding-bottom:0px;
	line-height:.35cm;
}
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
Jaymer
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: ►HowTo◄ Remove "ghost" scroll bars on grids

Post by Jaymer »

Really surprised no one has commented on even trying this! Works great.
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
Jhstephenson
Posts: 297
Joined: Wed Apr 22, 2015 11:44 pm

Re: ►HowTo◄ Remove "ghost" scroll bars on grids

Post by Jhstephenson »

Jaymer, I just found this tip and it works great.
BLOMASKY
Posts: 1470
Joined: Wed Sep 30, 2015 10:08 pm
Location: Ocala FL

Re: ►HowTo◄ Remove "ghost" scroll bars on grids

Post by BLOMASKY »

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

Bruce

p.s. you da man!
lueu
Posts: 89
Joined: Tue Mar 07, 2023 11:49 pm

Re: ►HowTo◄ Remove "ghost" scroll bars on grids

Post by 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.
2023-06-01_15-01-40.png
2023-06-01_15-01-40.png (7.45 KiB) Viewed 1941 times
Post Reply