Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 17 Oct 2019 10:04 by ADMIN
Release 2.2.0
Marcel
Created on: 02 Jun 2019 11:31
Category: Grid
Type: Bug Report
5
Wrong column alignment when no scrollbar is present (e.g., on mobile devices)

In the TelerikGrid-control there seems to be a miss-alignment of the gridcell compared to their respective columnheaders.

This behavior is present on touch devices and Mac.

 

example of correct alignment in non-mobile browser:

example of incorrekt alignment in mobile browser (simulated via F12 tools, but same on real android device):

 

It looks like it maybe caused by the column where the vertical scrollbar is placed (far right). If i change the padding-right from 16px to 0px it aligns correctly again.

Duplicated Items
3 comments
ADMIN
Marin Bratanov
Posted on: 02 Sep 2019 08:52

Hello Will,

I updated the title to be more accurate. It was left as it was from the initial report.

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Will
Posted on: 02 Sep 2019 07:54
I've seen this on Windows 10 desktop Chrome too, so it's not something mobile-specific (or Apple-specific, per a different bug)
ADMIN
Marin Bratanov
Posted on: 03 Jun 2019 05:19
Hello Marcel,

I am logging this for further review and fixing, it seems related to the lack of "hard" (or desktop-like) scrollbars and not to the browser - I reproduced it in FF and Chrome both. I took the liberty of editing that into your original post to avoid confusion for someone else.

Here is a workaround I can offer:

@media (hover: none) and (pointer: coarse) {
   .k-grid-header {
       padding-right: 0 !important;
    }
}
 
/* media query from https://medium.com/@ferie/detect-a-touch-device-with-only-css-9f8e30fa1134 */

if you put this in the markup of a server-side Blazor component, you have to escape the "@" symbol like so:

@@media (hover: none) and (pointer: coarse) {
   .k-grid-header {
       padding-right: 0 !important;
    }
}


Regards,
Marin Bratanov
Progress Telerik UI for Blazor

Create an account Log In
View
Type
Status
Category