Mobile Friendly DropDownList on Responsive Web Application

2 posts, 0 answers
  1. Harlan
    Harlan avatar
    19 posts
    Member since:
    Dec 2014

    Posted 27 Jun Link to this post

    We have a couple Responsive Web Applications (desktop first, responsive to mobile second) that use Kendo UI and either KnockOut or Angular 1.x. We do not use different URL's or serve different pages/content to mobile devices, though the styling and placement of elements is different thanks to CSS Media Queries and some Javascript we've written.

    I've seen the demo for the mobile friendly DropDownList and I like the way it works for mobile devices. However, we want to ensure that this version only shows for mobile devices, and not for desktop users. Is there any way to get this kind of behavior?

    1) Can we include the mobile stylesheet? Will it apply only to mobile devices?

    2) Can we use Kendo UI Mobile in a desktop web app without using kendo.mobile.Application?

    3) How do we get Kendo UI Mobile widgets only on mobile devices and have the same widgets show on Desktop in their normal Desktop style/behavior?

     

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 29 Jun Link to this post

    Hi Harlan,

    The mobile friendly widget is the same Kendo DropDownList widget but with mobile specific styling.
    Including the mobile stylesheet will not resolve the problem as the mobile specific styling relies on mobile ListView classes and mobile Application classes that are appended to the body tag.

    You may consider using a native <select> element on mobile devices as most modern browsers present a native mobile UI for it.

    Regarding your other questions:

    2) Can we use Kendo UI Mobile in a desktop web app without using kendo.mobile.Application?

    The sort answer is yes. Please check this help topic.

    3) How do we get Kendo UI Mobile widgets only on mobile devices and have the same widgets show on Desktop in their normal Desktop style/behavior?

    You may use kendo.support to detect if the application is running on mobile or desktop environment and conditionally initialise the corresponding widgets.

    Regards,
    Alexander Valchev
    Telerik
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
Back to Top