CODEWITHSUNDEEP
angularscrollviewresetpanning
zby
zby

Reputation: 1

How to fix Angular app panning problem on mobile?

I have finished my Angular app (simple reservation application) and everything works just fine in Desktop browsers.

Then of course started testing remotely on mobile browsers (mainly Android Chrome and Firefox) and encountered strange problem.

For example when I filter view to the Table 3 and then start scrolling this view with touch screen of my cell phone ... this view gets immediately rested to the default (user sees again table 1 and table 2).

For better understanding this problem I have attached video. Mobile Screen Pan Problem

I will mention that this problem persist only on mobile browsers.

I'm using Angular directive *ngIf to filter my view ... and view is based on array. (after user clicks Pick and then choses table 3 to display, rest column of an array gets nulled and skipped by *ngIf during template parse)

There are no errors in debug chrome console.

Any ideas what may be wrong ?

Upvotes: -2

Views: 1284

Answers (3)

zby
zby

Reputation: 1

Guys I found solution and the problem was related to mobile browsers as I suspected.

My App use on resize browser window event hook to preadjust layout to fit any kind of screen dimensions.

Turns out that when you touch scroll webpage on mobile not only on touch event gets fired but also on resize. That's why scrolling on mobile was resetting view of my app.

Upvotes: 0

Joosep Parts
Joosep Parts

Reputation: 6225

From the looks of your video, in the background reslayout.component.ts:56 is flickering - resetting perhaps? Something async resetting your selection on Pick dropdown. Also for mobile and desktop views it's better to use responsive layout (e.g Bootstrap). https://ng-bootstrap.github.io/#/components/table/overview

Upvotes: 0

TommyR22
TommyR22

Reputation: 67

You have to check the condition on ngIf. Maybe for some reasons it changes on scroll (e.g. an event listener on table)

Upvotes: 0

Related Questions