Drop Down List Font Size

5 posts, 1 answers
  1. Graham
    Graham avatar
    23 posts
    Member since:
    Jul 2012

    Posted 07 Dec 2016 Link to this post

    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";

     

  2. Graham
    Graham avatar
    23 posts
    Member since:
    Jul 2012

    Posted 07 Dec 2016 in reply to Graham Link to this post

    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;
    }

     

  3. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    557 posts

    Posted 08 Dec 2016 Link to this post

    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
    Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
  4. Graham
    Graham avatar
    23 posts
    Member since:
    Jul 2012

    Posted 09 Dec 2016 in reply to Ivan Zhekov Link to this post

    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");

     

  5. Answer
    Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    557 posts

    Posted 12 Dec 2016 Link to this post

    Graham,

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


    Regards,
    Ivan Zhekov
    Telerik by Progress
    Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
Back to Top