This is a migrated thread and some comments may be shown as answers.

Styled Content in Panel Headers

2 Answers 196 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Ashleigh L
Top achievements
Rank 1
Ashleigh L asked on 14 Oct 2015, 07:38 PM

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 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 16 Oct 2015, 02:36 PM
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.

http://dojo.telerik.com/OhIdi

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

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ashleigh L
Top achievements
Rank 1
answered on 19 Oct 2015, 04:18 PM
Thanks Dimo, we'll start from there.
Tags
PanelBar
Asked by
Ashleigh L
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Ashleigh L
Top achievements
Rank 1
Share this question
or