Here's a simple Grid:
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:
--> jaymerTip
Notice the non-functioning, disabled scroll bar. It doesn't work because the Paging system is active, yet its there taking up room.►HowTo◄ Remove "ghost" scroll bars on grids
►HowTo◄ Remove "ghost" scroll bars on grids
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
Aware Programming & Consulting - Tampa FL
Re: ►HowTo◄ Remove "ghost" scroll bars on grids
In your CSS file for your app,
add the following lines:
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:
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;
}
Your grid should look cleaner now:
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
Aware Programming & Consulting - Tampa FL
Re: ►HowTo◄ Remove "ghost" scroll bars on grids
and a few more simple tweaks.
Background Color 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:
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:
Background Color 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;
}
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
Aware Programming & Consulting - Tampa FL
Re: ►HowTo◄ Remove "ghost" scroll bars on grids
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
Jaymer
Aware Programming & Consulting - Tampa FL
-
- Posts: 297
- Joined: Wed Apr 22, 2015 11:44 pm
Re: ►HowTo◄ Remove "ghost" scroll bars on grids
Jaymer, I just found this tip and it works great.
Re: ►HowTo◄ Remove "ghost" scroll bars on grids
That is because ALL your tips work great, so it is just assumed!
Bruce
p.s. you da man!
Bruce
p.s. you da man!
Re: ►HowTo◄ Remove "ghost" scroll bars on grids
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.
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.