This is a migrated thread and some comments may be shown as answers.

Grid Table Header Missing "buffer" spacing above vertical scroll bar on scrollable grid

2 Answers 108 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 09 Dec 2013, 05:16 PM
Hi,

I have  kendo grid that is scrollable horizontally and vertically.  When I scroll all the way to the right the columns become mis aligned by the width of the vertical scroll bar.  See image here:

http://snag.gy/WgXqY.jpg

I noticed that in this jsfiddle page there is spacing that looks like a fixed column above the scroll bar that accounts for this space.  All my columns have explicit width defined.  Why am I missing that spacing above the scroll bar.

http://jsfiddle.net/dimodi/F45Sc/

$("#policyVIEConsolidation").kendoGrid({
    dataSource: getPolicyDataSource(),
    pageable: {
        pageSizes: [10, 50, 100, 500],
        buttonCount: 5,
        numeric: true,
        refresh: true,
        messages: {
            display: "Displaying {0:n0} - {1:n0} of {2:n0}"
        }
    },
    dataBound: onDataBoundPolicyVIEConsolidation,
    scrollable: true,
    height: 'auto',
    sortable: true,
    resizable: true,
    reorderable: true,
    toolbar: kendo.template($("#templatePolicy").html()),
    columns: getColumns()
});
Thanks in advance.  This is drving me and my users nuts...

2 Answers, 1 is accepted

Sort by
0
Accepted
Ryan
Top achievements
Rank 1
answered on 09 Dec 2013, 05:59 PM
I found the problem.  After discovering some other threads on a similar issue i realized that the space is being accounted for by an inline style on the grid header.

<div class="k-grid-header" style="padding-right: 17px;">

Once I  realized that is was easy to find the !important style in my css that was overriding the inline style and that was added by some one for no reason other than to drive me crazy.

Ryan
0
Joseph
Top achievements
Rank 1
answered on 16 May 2019, 08:50 PM

One reason why it might have been there...other than to drive you crazy :-)

If you turn off the scroll bar...that padding causes the header to be misaligned with the rest of the grid.  So that padding has to be set to 0px when the scroll bar is removed by  style="overflow: hidden;" or a css class with the same setting.

If the scrollbar is there...then you need that "padding-right: 17px" to align the header with the grid.

Tags
Grid
Asked by
Ryan
Top achievements
Rank 1
Answers by
Ryan
Top achievements
Rank 1
Joseph
Top achievements
Rank 1
Share this question
or