Toolbar button click event not firing reliably on mobile browsers

[Kaan]

Hello!

I have prepared an example: http://dojo.telerik.com/oZOYa

In my project setup I use 24x24 px images with transparent background (in the online demo 16x16 px), which I position in the center of the buttons (css vertical-align). I also need to set the button click event handlers after the toolbar has been initialized.

On desktop browsers the example works well. However, when I use Chrome for Android (version 58), the button click event is not always firing, even when the orange button background flashes up, when pressing on a button. The issue seems to appear more often, when the page is zoomed. Toggle buttons work fine. I experience the same issue, but less often, with iOS 9.3.2 Safari too.

Any ideas on how to improve the user experience?

 

Best regards,

Kaan

[Joana]

Hello Kaan,

In order to improve the user behavior on mobile, you could use the mobile view of the Toolbar: http://docs.telerik.com/kendo-ui/controls/navigation/toolbar/how-to/use-mobile-view-toolbar where you could test the behavior by opening the example in .  If you still experience certain issues with tapping over toolbar's tools, I will log an enhancement issue to increase the clickable area of the button.

Regards,
Joana
Progress Telerik

[Kaan]

Hello Joana,

When I run the example in the preview tab, I get this error: Script error. at line 0

The documentation says "It is recommended that you open it in Dojo.", but when I run the example in Dojo, then I get following error: Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container. I get the same error in Chrome, Firefox and Edge.

Additional questions: Do I have to call the kendo.mobile.Application constructor on the whole document.body element, or can I also call it just on the toolbar container div? And is kendo.mobile.Application also improving the usability of Kendo UI button widgets?

Regards,
Kaan

[Joana]

Hello Kaan,

Thank you for bringing the issue with the documentation example to us.

Here is the updated sample:

http://dojo.telerik.com/@jivanova/atOriq

We suggest that our users initiate the mobile application for the contents of the whole body, but you could set it to a specific element. Have a look at this article explaining the application: http://docs.telerik.com/kendo-ui/controls/hybrid/application and the usage of views. 

Initializing kendo.mobile.Application() enables the mobile view of the Toolbar, which will lead to user experience improvement.

Regards,
Joana
Progress Telerik