Badge style

7 posts, 0 answers
  1. Voss
    Voss avatar
    11 posts
    Member since:
    Jul 2014

    Posted 13 Aug 2014 Link to this post

    Is it possible to style the badge?

    Looking to make it larger and possibly move it down and in a bit.

    thanks for any help.

    v.
  2.
  3. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 14 Aug 2014 Link to this post

    Hi Voss,

    You can customize the appearance of the badge using custom CSS rules. As an example:
    .km-ios .km-badge,
    .km-ios7 .km-badge,
    .km-blackberry .km-badge,
    .km-android .km-badge,
    .km-wp .km-badge,
    .km-flat .km-badge{
        min-width: 2.2em;
        height: 2.2em;
        line-height: 2.2em;
        top: 0;
    }
     
    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Voss
    Voss avatar
    11 posts
    Member since:
    Jul 2014

    Posted 14 Aug 2014 in reply to Iliana Nikolova Link to this post

    Iliana,
    I copied that into my site.css, but do not see any difference in my badges.

    Can you supply a small example?

    thanks.
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 14 Aug 2014 Link to this post

    Hi Voss,

    Here is a simple example which demonstrates the suggested solution is action. If you still experience any issues please modify the example and demonstrate your current implementation - this way I would be able to check what exactly is going wrong and provide concrete recommendations.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8.
  9. Voss
    Voss avatar
    11 posts
    Member since:
    Jul 2014

    Posted 15 Aug 2014 in reply to Iliana Nikolova Link to this post

    Can you provide an example without the       var app = new kendo.mobile.Application(document.body);?

    I cannot get the demo work without the mobile app part.

    thanks.
  11. Voss
    Voss avatar
    11 posts
    Member since:
    Jul 2014

    Posted 18 Aug 2014 in reply to Iliana Nikolova Link to this post

    If I remove this  var app = new kendo.mobile.Application(document.body); it does not work.
  13. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 18 Aug 2014 Link to this post

    Hello Voss,

    In this case you can use the following CSS rule: 
    .km-badge{
       min-width: 2.2em;
       height: 2.2em;
       line-height: 2.2em;
       top: 0;
    }
    Here is the updated example.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  14.
Back to Top