How to override mobile style on DropDownList?

4 posts, 1 answers
  1. SRV
    SRV avatar
    5 posts
    Member since:
    Sep 2012

    Posted 25 Apr 2016 Link to this post

    I am using a DropDownList with Kendo Mobile, and would like to override the mobile style when clicking the control. 

    Now it get's style as the image to the left (mobile style), but I'd prefer the standard kendo style (right)

     

     

  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2621 posts

    Posted 27 Apr 2016 Link to this post

    Hi Olaf,

    There is no easy way to turn off the mobile styling of the DropDownList widget when it is used in a Kendo UI mobile application. Keep in mind that Kendo UI Mobile is targeting hybrid apps and is not designed to be used as a regular desktop site.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. SRV
    SRV avatar
    5 posts
    Member since:
    Sep 2012

    Posted 27 Apr 2016 in reply to Iliana Nikolova Link to this post

    Thank you for the reply
  4. Marlon
    Marlon avatar
    18 posts
    Member since:
    Jul 2013

    Posted 22 Jan Link to this post

     
    var deMobilizeDropDownLists = function(view) {
      //'view' is an instance of kendoMobileView that contains dropdownlist instances.
     //I typically call this from the 'init' event of the view.
     
    $(".k-animation-container.km-popup.km-widget").removeClass("km-popup km-widget");
    var dropdowns = $("[data-role='dropdownlist']");
          _.each(dropdowns, function(item){
            var comp = $(item).data("kendoDropDownList");
            if(comp && comp.popup) {
              comp.popup.bind("open", function(event){
                var elem = event.sender;
                event.sender.element.parent().removeClass("km-popup km-widget");
                if(event.sender.element.parent().hasClass("km-popup")) {
                  //Prevent default open animation.
                  //Then remove classes and open the popup programitcally
                  //Easy peasy, Lemon squeezy
                  event.preventDefault();
                  event.sender.element.parent().removeClass("km-popup km-widget");
                  setTimeout(function(){
                    event.sender.open();
                  },0);
                }
              });
            }
          });
     
     }

     

    I created this hack to get that behavior. Hope it helps!

Back to Top