Web and iOS: Buttons are difficult to hit

[Tobias_Heinz]

I noticed that on Web and in iOS (in Android everything is just working fine!) Buttons (and Input fields) are in most cases (sometimes they work as expected) difficult to hit:

Example:
the upper button can be clicked on the full button area while the button below is responding only on the upper border of the button:

The setup in appgyver looks as follows with the lower buttons being shown/hidden by variable state (visible true/false) Upper Button and lower Button are in two different containers (Container 2 and Container 3):

What am I missing?
Cheers and thanks to all!

[Mevi]

Huh. Haven’t experienced this before. Is there something below Container 3 which could be overlapping the button or something?

[Tobias_Heinz]

No.

I found out, that using the navigation menu (temporarily assigning all pages a navigation entry) and hopping to another page and then navigation can enable the buttons sometimes to work correctly.

I also noticed that sometimes black areas on this page trigger actions on other pages - such as alerts.

I am quite puzzled how that is.

You could try it on https://www.heinz.bz/meinschreibenApp/

[Mevi]

Ok that’s very odd, I’ve never seen anything like this before. I can’t help you like this, I’d need to have a look at your app in Composer to be able to have any inkling of what’s going on. Or if you’d prefer, you can try removing different aspects of your pages one by one and seeing when the buttons start/stop working.

[Tobias_Heinz]

I would very much appreciate help here.
What do you need in order to take a look? The composer Url is: …builder/applications/136318

Thanks and Cheers,
Tobias

[Mevi]

When I look at the developer console when opening your app, there’s a ton of “Missing required parameter ‘Adresse’” errors being fired. Perhaps look into your logic to not try to do whatever needs the ‘Adresse’ before you have it, not sure if this is causing some of these problems, but it will be better for the running of the app.

I removed some of your excess empty containers just to get a better sense of what was going on. (You can undo this from History if you prefer)

For some reason if/when the UI starts to respond to clicks I get the error “Die Eingabe des Bestätigungscodes hat nicht funktioniert”. Where’s this coming from? I couldn’t find it in any buttons on the page (Startseite).

[Tobias_Heinz]

I am aware of the Adresse error - I am currently using this as a workaround to prevent fetching addresses without a parameter. It resolves once the Adress-Parameter is available, will fix this later.

Sorry - correction!
That is quite strange for me as well - this message is on page “Adresse (not Mobilnummer) bestätigen” - when clicking “Code einlösen”. It is not even on the startpage!

[Mevi]

Ah! I found one of the problems.

The page is mounted if it’s on the navigation menu when the app opens, so this was triggering on app start. This was on several pages, so I moved the logic to be triggered from focus instead.

However, there’s a lot more of this logic in your data variables as well, so you should perhaps have a look for yourself if some of the logic would be better served in page focused instead of mounted. In general you should not expect the page to be in view when it is mounted, only when it’s focused. If you have any more of these type of “focus input” or other logic attached to page mounts, that causes problems.

I would recommend going through all data variables and other logic to check it’s not on page mount if it’s doing anything UI related or that it should only be doing after it is in view, and then if the problem persists, remove all other pages from navigation, see if that solves the problem, then start adding them one by one and see which one is causing the trouble.

[Tobias_Heinz]

Great advise. I fixed the Adresse problem with this as well.

I was somehow on the wrong track since creating a new page automatically shows a node “hide spinner” connected to the “page mounted” event.

[Tobias_Heinz]

Unfortunately I deactivated Navigation when trying this. The problem went away probably due to disabling the app navigation, now that I enabled it again, the problem re-occurs.

Any idea how this could be connected to app navigation?

[Mevi]

Yep the reason why it’s related to app navigation is that the pages that are in the navigation menu are mounted when the app is opened. That means all the logic starts to run at that point, if it’s connected to the page mounted event. Remove any logic from the page mounted events (except hide spinner) to be in page focused instead.

[Tobias_Heinz]

Mmmh - I was under the impression that I did that. Will check again.