Accordion element header is reversed in RTL

Support
#1

Hello there

Accordion element header in Cornerstone looks in RTL exactly as it is in LTR, which should be the other way around. This includes the text position, the arrow direction and position and its rotation direction when clicked. How can I fix that?

Thanks

#2

Hi Mustafa,

We could fix this by adding some custom CSS.

Please try adding this code in the Global CSS:

.x-accordion {
    text-align: right;
}

.x-accordion-heading .x-accordion-toggle:before {
    float: right;
    margin: 7px 5px;
}

Hope this helps.

#3

Hey Jade

Thanks!

I added it to style.css of the child theme but didn’t work. Also I’m not sure if this will reverse the arrow location/rotation direction. Would you please help?

Thanks!

#4

Hello There,

Since you are using a v2 element, please make use of this code instead:

.rtl .x-acc-item .x-acc-header-content,
.rtl .x-acc-item .x-acc-content {
    text-align: right;
}

Please let us know if this works out for you.

#5

Thank you

Yes, that worked great! Now remains the arrow, which should be pointing left to the text, and rotating counter clockwise when expands. Is this possible?

#6

Hello There,

Have the css code updated and use this:

.rtl .x-acc-item .x-acc-header-content,
.rtl .x-acc-item .x-acc-content {
    text-align: right;
}

.rtl .x-acc .x-acc-header-indicator {
    transform: translate3d(0,0,0) rotate(180deg);
    margin-left: 5px;
}

Hope this helps.

1 Like
#7

Awesome!

Thanks :slight_smile: :thumbsup:

#8

Glad that we could be of a help :slight_smile:

1 Like
#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.