# User experience when scrolling on mobile devices

softteam
130 1 8

Hi, we noticed some not smooth movements on mobile devices (we use Tablet mainly) when scrolling horizontally.

Both on Tablet and mobile, the user experience when performing horizontal scrolling is not entirely satisfactory, a couple of problems are perceived: 1. The column headers do not move at the same time that column content do. 2. Sometimes content perform not desired movements especially when scrolling slowly.

I created a fiddle to respresent it: https://zkfiddle.org/sample/11blnm1/15-Grid-STS

What can we do?

Thank you, Javier

delete retag edit

Sort by » oldest newest most voted

hawk
3048 1 5
http://hawkphoenix.blogsp...

### Move delay issue

when I move cells horizontally (left or right) in iPad, Chrome, iOS 14.0 the grid column headers move a bit late than the content rows, see the video.
is that the case you saw? which device and browser do you use? It seems firefox doesn't have this issue.

### not desired movements

I am not sure what is "not desired movements", could you describe the clear steps or provide a screenshot or video?

hawk
3048 1 5
http://hawkphoenix.blogsp...

### move delay issue

Such a delay is caused by the difference between browser native scrolling and onScroll event listener. (see https://hacks.mozilla.org/2017/11/async-panzoom-apz-lands-in-firefox-quantum/).

The current workaround is not to use grid inner scroll with the steps below:

• we expand the grid to its full width by width="min-content".
• enable scroll bar on the outer <div> by style="overflow-x: auto;"
• put paging control out of grid to avoid being scrolled by onCreate="self.setPaginal(pag);

please see the full example which can eliminate the scrolling delay.

softteam
130 1 8

Hi Hawk,

This is working for me but I would like grid width to be as wide as possible in order to use all screen width in desktop devices. I got this:

https://zkfiddle.org/sample/11blnm1/26-Grid-STS

An I would like something like this but without the move delay issue:

https://zkfiddle.org/sample/11blnm1/27-Grid-STS

Thank you, Javier

hawk
3048 1 5
http://hawkphoenix.blogsp...

found a way to fit both mobile and desktop with "min-width":

https://zkfiddle.org/sample/11blnm1/32-Grid-STS

softteam
130 1 8

Hi, Hawk:

Thank you, this is working!

The only thing I noticed is: If the table is higher than the screen, we got an unwanted horizontal scroll bar. What should we do?

Thank you,

Javier

hawk
3048 1 5
http://hawkphoenix.blogsp...

Do you mean "the table is wider than the screen, so produce a horizontal scrollbar", right?

Since you specify hflex="min" on all columns, this will enforce each column has a minimum width, for a smaller screen, the grid might be too wider. So it's better to remove hflex="min" for some column, so when rendering on a smaller screen, it will reduce those columns without hflex="min" like:

https://zkfiddle.org/sample/11blnm1/33-Grid-STS (I remove it on "Nombre paciente")

hawk
3048 1 5
http://hawkphoenix.blogsp...

After a 2nd view, I think you might mean "the vertical scrollbar produces an unexpected horizontal scrollbar", right?

When I increase the page size (based on the previous example: https://zkfiddle.org/sample/11blnm1/32-Grid-STS ) to produce a vertical scrollbar, it doesn't show a horizontal scrollbar.

Could you provide a reproducible example? Because your screenshot looks different from my previous example.

It looks like the scrollbar is out of the grid, you should check the css rules ( width and overflow) of the grid's parent element, they might cause the scrollbar appear.

softteam
130 1 8

Hi,

I just opened this new example you gave me (https://zkfiddle.org/sample/11blnm1/34-Grid-STS) and I can see an horizontal scrollbar just over the paging buttons:

Javier

hawk
3048 1 5
http://hawkphoenix.blogsp...

The outer div is: <div id="container" style="overflow-x: auto;"

So if the grid is wider than the div width, you will see a horizontal scrollbar. Since we specify `hflex="min", if a row contains long text, it will produce a wider row that exceeds the outer div. But in your screenshoot, I don't see a long text.

I can't reproduce it in my chrome 95:

• which browser version do you use?
• your screenshot shows you are running 961-fl, is that intended?

I also notice the text in column "Nombre paciente" wraps a new line, but the column "Nivel" has much space. so "Nombre paciente" should have enough space and no need to wrap. This looks quite different to mine, if we both run the same zkfiddle without the change.

Maybe this is the possible cause. could you check why?

softteam
130 1 8

Hi,

I used Chrome 95.0.4638.69

I realised that "Nombre paciente" wraps when I use an screen at 150% scale and 3840x2160 resolution. If I use a 1920x1080 resolution at 100% scale the horizontal scrollbar does not appear.

Anyway, this problem is solved in my real application by now.

Thank you, Hawk!

[hide preview]