Buttons in default k-block, k-header

4 posts, 0 answers
  1. iCognition
    iCognition avatar
    66 posts
    Member since:
    Apr 2012

    Posted 24 Jun 2013 Link to this post

    Hi I want to use K-Block and K-Header to style some portlets.

    I want the K-Header to contain some right aligned buttons (expand, minimize and close)

    However, currently they overflow the header height and setting the height of the portlet header statically doesn't lend itself to modularity and style changes.

    Any ideas?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 26 Jun 2013 Link to this post

    Hi Matt,

    I am not quite sure if I understand your scenario correctly. Could you please provide a small runnable example which demonstrates your current implementation (or at least a picture which illustrates the desired outcome)? This way I would be able to advice you further and provide concrete recommendations. Thank you in advance for your cooperation. 

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. iCognition
    iCognition avatar
    66 posts
    Member since:
    Apr 2012

    Posted 26 Jun 2013 Link to this post

    Sure, here.

    I want to make the header encompass the right floated button, without explicitly specifying the k-header height.
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 28 Jun 2013 Link to this post

    Hi Matt,

    Thank you for the example. In order to achieve the desired outcome you should override the default k-button styling using custom CSS. For example: 

    .k-button{
        margin-top: -6px;
        padding-top: 0;
        padding-bottom: 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!
Back to Top