Increase size of Window Title and X button

3 posts, 0 answers
  1. Baldvin
    Baldvin avatar
    13 posts
    Member since:
    Nov 2013

    Posted 20 Aug 2015 Link to this post

    I have a problem with too small X button to close a modal window when my web site is viewed on tablet computers. 

    Using KendoUI with MVC. I have a window like this:

    @(Html.Kendo().Window().Name("​mywindow").Title("​My very own Window Title text")
    .Content("Loading...").Iframe(true).Width(600).Height(300).Visible(false).Modal(true)

    )

    What I want to do is make the title text and especially the X to close the window about 2x bigger to make it easier to use on tabled computers. I this possible? If so, how?

  2. eo
    eo avatar
    27 posts
    Member since:
    Jul 2015

    Posted 21 Aug 2015 Link to this post

    Hello Baldvin,

    To change these properties you will have to use ​css. Kendo themes use sprites for their icons and these can be resized by using the zoom property. In the case of the X button, adding this to your stylesheet will accomplish what you're after:

    .k-i-close{
        zoom:1.2;
    }

     Hope this helps.

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 24 Aug 2015 Link to this post

    Hi Baldvin,

    Another option is to change the default icon via custom one:
    .k-window-titlebar .k-i-close{
        background-image: url('/* ... */');
    }

    Regarding the title text, the following CSS rule should help to increase it: 
    .k-window-titlebar {
        font-size: 30px; /* set font-size */
    }

    Regards,
    Iliana Nikolova
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top