0

User experience when scrolling on mobile devices

asked 2021-09-28 22:04:18 +0800

softteam gravatar image 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 flag offensive retag edit

10 Answers

Sort by ยป oldest newest most voted
0

answered 2021-09-29 18:15:59 +0800

hawk gravatar image hawk
3048 1 5
http://hawkphoenix.blogsp... ZK Team

updated 2021-09-29 18:30:53 +0800

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?

link publish delete flag offensive edit
0

answered 2021-09-30 11:41:36 +0800

hawk gravatar image hawk
3048 1 5
http://hawkphoenix.blogsp... ZK Team

updated 2021-10-25 17:22:58 +0800

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.

link publish delete flag offensive edit
0

answered 2021-10-15 16:34:46 +0800

softteam gravatar image 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

image description

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

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

Thank you, Javier

link publish delete flag offensive edit
0

answered 2021-10-25 17:50:32 +0800

hawk gravatar image hawk
3048 1 5
http://hawkphoenix.blogsp... ZK Team

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

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

link publish delete flag offensive edit
0

answered 2021-10-28 00:23:58 +0800

softteam gravatar image 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?

image description

Thank you,

Javier

link publish delete flag offensive edit
0

answered 2021-11-01 10:13:42 +0800

hawk gravatar image hawk
3048 1 5
http://hawkphoenix.blogsp... ZK Team

updated 2021-11-01 10:41:22 +0800

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")

link publish delete flag offensive edit
0

answered 2021-11-01 10:53:52 +0800

hawk gravatar image hawk
3048 1 5
http://hawkphoenix.blogsp... ZK Team

updated 2021-11-01 11:01:20 +0800

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.

image description https://zkfiddle.org/sample/11blnm1/34-Grid-STS

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.

link publish delete flag offensive edit
0

answered 2021-11-05 15:40:15 +0800

softteam gravatar image 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:

image description

Javier

link publish delete flag offensive edit
0

answered 2021-11-10 18:51:54 +0800

hawk gravatar image hawk
3048 1 5
http://hawkphoenix.blogsp... ZK Team

updated 2021-11-10 18:53:29 +0800

In this https://zkfiddle.org/sample/11blnm1/34-Grid-STS

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: image description

  • 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. image description

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

link publish delete flag offensive edit
0

answered 2021-11-12 20:50:41 +0800

softteam gravatar image 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!

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2021-09-28 22:04:18 +0800

Seen: 52 times

Last updated: Jan 10

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More