[Solved] Drop Down List Font Size

[Graham]

I have a web page on which some of the drop down lists need normal text, and some of them will be used on touch screens and hence need large text. If I just add the style...

 

k-popup .k-item {
  font-size: 24px;
}

 

That sets the fonts for all drop down lists - not just the touchscreen ones. I have tried the following...

 

.gatehousedropfont.k-popup .k-item {
  font-size: 24px;
}

 

$("#LoadTipTypeDropDown").kendoDropDownList({
    open: function(e) {
        e.sender.list.addClass("gatehousedropfont");
    }
});

 

...but that just removes all the items from the drop down list. Indeed, even the following call removes all the items from the drop down list:

 

$("#NewExtraVehicle").kendoDropDownList();

 

Also, looking at the object in the Chrome inspector implies that something like the following might work - but unfortunately it doesn't:

 

var theList = $("#LoadTipTypeDropDown").kendoDropDownList;
theList[0].style.fontSize = "24";

 

[Graham]

Also, may I have a method of setting the font size in a TimePicker object's drop down list, please? As before, the following style works - but sets the font size in all drop downs - not just the ones I want to set:

 

k-popup .k-item {
  font-size: 24px;
}

 

[Ivan Zhekov]

Hi, Graham.

Your logic is fine e.g. you have indeed added the styles at the right place. However, some of the styles in the popup are inlined (to ensure the same font styles between the picker and dropdown) thus have higher specificity and your local styles are overridden.

The solution is to use !important. I've prepared an example for you: http://dojo.telerik.com/@joneff/opEvi. I've also added a media query for smaller screensizes, which you can customize.

Regards,
Ivan Zhekov
Telerik by Progress

[Graham]

Hi Ivan,

 

Thanks for your help! The media query was a very good idea - but unfortunately we cannot use it because we do not know what size screens will be used in either touch or non-touch situations. The following did work though:

 

<style>
    .fs20 { font-size: 20px; }
    .k-popup.fs20 { font-size: 20px !important; }
</style>

 

var dropdown = $("#LoadTipTypeDropDown").data("kendoDropDownList");
dropdown.popup.element.addClass("fs20");

 

As there isn't a forum for a Kendo MVC TimePicker, would you mind telling me how I can do the same with the drop down font on one of these, please? I know it's possible, because if I set the drop down font size for the whole page, it also works for the time picker drop down font. Here are a couple of JavaScript statements I have tried - neither of which work, unfortunately:

 

dropdown = $("#ExtraVehicleDepartureTime").data("kendoTimePicker");
dropdown.element.addClass("fs20");

 

dropdown = $("#ExtraVehicleDepartureTime").data("kendoTimePicker");
dropdown.popup.element.addClass("fs20");

 

[Ivan Zhekov]

Graham,

I've updated the example to include timepicker and datepicker -- http://dojo.telerik.com/@joneff/opEvi/2.


Regards,
Ivan Zhekov
Telerik by Progress