New to Kendo UI for Angular? Start a free 30-day trial
Positioning the Expand/Collapse Arrow to the Left in ExpansionPanel
Environment
| Product | Progress® Kendo UI for Angular ExpansionPanel |
Description
When using the ExpansionPanel in Kendo UI for Angular, the expand/collapse arrow is positioned on the right side of the component. I want to display it at the beginning of the component instead of at its default position.
This Knowledge Base article also answers the following questions:
- How can I move the expand/collapse arrow to the left side of the ExpansionPanel?
- What CSS changes are required to adjust the position of the arrow in the ExpansionPanel?
- Is it possible to customize the layout of the ExpansionPanel in Kendo UI for Angular?
Solution
To position the expand/collapse arrow on the left side of the ExpansionPanel, use the following selectors and adjust the value of the CSS order property to customize the arrangement of the elements within the panel.
css
.k-expander-indicator {
order: 0;
}
.k-expander-title, .k-expander-sub-title {
order: 1;
}
.k-spacer {
order: 2;
}The following example demonstrates the suggested approach in action.
Change Theme
Theme
Loading ...