Toolbar button click event not firing reliably on mobile browsers

4 posts, 0 answers
  1. Kaan
    Kaan avatar
    46 posts
    Member since:
    May 2016

    Posted 30 May Link to this post

    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

  2. Joana
    Admin
    Joana avatar
    125 posts

    Posted 01 Jun Link to this post

    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 dojo.  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.
  3. Kaan
    Kaan avatar
    46 posts
    Member since:
    May 2016

    Posted 06 Jun in reply to Joana Link to this post

    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

  4. Joana
    Admin
    Joana avatar
    125 posts

    Posted 08 Jun Link to this post

    Hello Kaan,

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

    Here is the updated dojo 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.
Back to Top