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/
Thanks in advance. This is drving me and my users nuts...
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()});2 Answers, 1 is accepted
0
Accepted
Ryan
Top achievements
Rank 1
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.
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
<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
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.