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

How to override mobile style on DropDownList?

3 Answers 34 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
SRV
Top achievements
Rank 1
SRV asked on 25 Apr 2016, 06:33 AM

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)

 

 

3 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Nikolova
Telerik team
answered on 27 Apr 2016, 06:08 AM
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!
 
0
SRV
Top achievements
Rank 1
answered on 27 Apr 2016, 06:33 AM
Thank you for the reply
0
Marlon
Top achievements
Rank 1
answered on 22 Jan 2017, 03:57 PM
 
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!

Tags
DropDownList
Asked by
SRV
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
SRV
Top achievements
Rank 1
Marlon
Top achievements
Rank 1
Share this question
or