Customizing the arrow direction the panelbar

[Phil Isaacs]

Out of the box the arrow defaults to up for opened and down for closed. Out art director wanted to know if we could change the arrow to be pointing left for closed and up for open.

Hope this question makes sense.

 

Philip

[Neli]

Hi Phil,

You can override the default icons by applying custom style. In order to override the 'down' arrow and replace it with 'left' arrow, you can use the style below:

<style>
     .k-i-arrow-60-down:before {
       content: "\e007" !important;
     }
</style>

Note, that the above will replace all arrows on the page. In case you need to replace only the arrows in specific PanelBar, you can add its id to the selector. For example: #panelbar .k-i-arrow-60-down:before

I hope that the linked Dojo example will be helpful.

Regards,
Neli
Progress Telerik