Keep the PanelBar Header Style Constant
Environment
Product Version | 2019.3.1023 |
Product | Progress® Kendo UI® PanelBar for jQuery |
Description
How can I style the Header of the Kendo UI PanelBar such that its CSS property remains the same at all the states (focused, selected, hover)?
Solution
In order to keep the CSS property of the Kendo UI PanelBar Header constant regardless of its state, use either of the two approaches:
Approach 1
Set the CSS property of the following classes using a selector to add styling to a particular PanelBar:
#panelbar.k-panelbar>.k-item>.k-link,
#panelbar.k-panelbar>.k-item>.k-link .k-icon,
#panelbar.k-panelbar>.k-item>.k-link:hover {
background-color: blue;
color: white;
border-color: blue;
box-shadow: none;
}
Example
<style>
#panelbar.k-panelbar>.k-item>.k-link,
#panelbar.k-panelbar>.k-item>.k-link .k-icon,
#panelbar.k-panelbar>.k-item>.k-link:hover {
background-color: blue;
color: white;
border-color: blue;
box-shadow: none;
}
</style>
<div id="panelbar"></div> <br><br>
<div id="panelbar1"></div>
<script>
$("#panelbar").kendoPanelBar({
dataSource: [
{ text: "foo", items: [
{ text: "bar" },
{ text: "xyz" },
{ text: "abc" },
{ text: "pqr" }
] }
]
});
$("#panelbar1").kendoPanelBar({
dataSource: [
{ text: "foo", items: [
{ text: "bar" },
{ text: "xyz" },
{ text: "abc" },
{ text: "pqr" }
] }
]
});
</script>
OR
Approach 2
Set the CSS property of the following classes using 'div' to add styling globally:
div.k-panelbar>.k-item>.k-link,
div.k-panelbar>.k-item>.k-link .k-icon,
div.k-panelbar>.k-item>.k-link:hover {
background-color: blue;
color: white;
border-color: blue;
box-shadow: none;
}
Example
<style>
div.k-panelbar>.k-item>.k-link,
div.k-panelbar>.k-item>.k-link .k-icon,
div.k-panelbar>.k-item>.k-link:hover {
background-color: blue;
color: white;
border-color: blue;
box-shadow: none;
}
</style>
<div id="panelbar"></div> <br><br>
<div id="panelbar1"></div>
<script>
$("#panelbar").kendoPanelBar({
dataSource: [
{ text: "foo", items: [
{ text: "bar" },
{ text: "xyz" },
{ text: "abc" },
{ text: "pqr" }
] }
]
});
$("#panelbar1").kendoPanelBar({
dataSource: [
{ text: "foo", items: [
{ text: "bar" },
{ text: "xyz" },
{ text: "abc" },
{ text: "pqr" }
] }
]
});
</script>