Styled Content in Panel Headers

3 posts, 0 answers
  1. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 14 Oct 2015 Link to this post

    We want to use a Kendo PanelBar for a section of our page, but we need to be able to put styled content into the header - at minimum a span, but ideally divs and other HTML. 

    Using the attached image as an example, we want to place the grade and pass/fail icon into the header, while being able to customize the font size (and for that matter, the icon is an <i> tag itself).


  2. Dimo
    Dimo avatar
    8485 posts

    Posted 16 Oct 2015 Link to this post

    Hi shimmoril,

    Custom content can be placed in the PanelBar's headers, however you are limited to using inline elements only (span, a, em, strong, img, etc.). Using block elements such as div and p is theoretically possible, but it would make the HTML markup invalid from web standards point of view.

    Here is a simple example. If you apply enough custom classes to the custom HTML tags, you will be able to style them, according to your preferences.

    Also note that custom clickable elements inside the header must prevent event bubbling, so that the PanelBar does not trigger item expand/collapse.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Ashleigh L
    Ashleigh L avatar
    113 posts
    Member since:
    Jun 2012

    Posted 19 Oct 2015 in reply to Dimo Link to this post

    Thanks Dimo, we'll start from there.
Back to Top