This is a migrated thread and some comments may be shown as answers.

Toolbar button click event not firing reliably on mobile browsers

3 Answers 191 Views
Toolbar
This is a migrated thread and some comments may be shown as answers.
Kaan
Top achievements
Rank 1
Kaan asked on 30 May 2017, 04:29 PM

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

3 Answers, 1 is accepted

Sort by
0
Joana
Telerik team
answered on 01 Jun 2017, 02:39 PM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Kaan
Top achievements
Rank 1
answered on 06 Jun 2017, 10:54 AM

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

0
Joana
Telerik team
answered on 08 Jun 2017, 07:50 AM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Toolbar
Asked by
Kaan
Top achievements
Rank 1
Answers by
Joana
Telerik team
Kaan
Top achievements
Rank 1
Share this question
or