Right to left or align right

[Dan_Lahat]

Can you offer a CSS that will make this relevant for righ to oleft websotes?

[Max]

Hi there, @Dan_Lahat

Please add this code to the Custom CSS field on the Style tab of your widget’s settings and let me know if it helped:

.eapp-cookie-consent-message-text {
  direction: rtl;
  text-align: right;
}

I also agree that it would be awesome to have this option right in the settings. This idea is already on the Wishlist and you can upvote it here - Hebrew language with RTL mode

[Dan_Lahat]

Thanks @Max , that did align the text to the right.
Any chance we can switch the buttons and the cookie image?

[Max]

Sorry for the oversight!

We’ve added this CSS code to your widget to implement the RTL mode for the buttons and icons:

.eapp-cookie-consent-item-container {
  direction: rtl;
}

.eapp-cookie-consent-cookie-icon-component,
.eapp-cookie-consent-actions-accept{
  margin-left: 20px;
  margin-right: 0;
}

.eapp-cookie-consent-actions-actions {
  margin-left: 0;
  margin-right: 20px;
}

Check it out and let me know if you like the result

[Dan_Lahat]

Amazing!!!
Thank you very much.
I’ll soon trouble you for similar rtl issues with the calculator I’m working on.
Thanks again!

[Max]

Sure! I’ll be happy to help you further

[Dan_Lahat]

Hi Max,
Any chance you can make my calculator and all the objects right to left?
where it was possible, I already chaged it.
thanks,
Dan
https://dash.elfsight.com/widget/dc81785c-3c5b-4ad7-8af1-4ce6639a51ef

[Max]

Hi there, @Dan_Lahat

We have a CSS code that applies the RTL mode to the most widget elements. Feel free to use it - Apply RTL mode.

As for the other elements, like Slider fields and Choice fields:

• the box with the default field should be swapped with the field label

• Slider control should also be moved from right to left

• Choice options should be displayed on the right and the field label on the left

Is everything correct?

I also see you’ve created a request for this option on the Wishlist. This idea is already on our Wishlist and you can upvote it here - Add support for RTL

[Dan_Lahat]

Hi Max,

Thank you for all your help.
With some help from Gemini, I managed to get almost everything flipped right to left.
The only issue is the slider.
Any suggestions for this?
Is it possible?

Here is my current CSS:

/* — 1. GLOBAL RTL TEXT — /
/ This ensures all titles, hints, and descriptions align to the right /
[class=‘FormFieldLayout__Hint-sc’],
[class*=‘slider__Label-sc’],
[class*=‘FormFieldLayout__Label-sc’],
[class*=‘results__Container-sc’],
[class*=‘slider__Container’] {
direction: rtl !important;
text-align: right !important;
}

/* — 2. SLIDER FUNCTIONAL FIX (Left-to-Right) — /
/ We reset the bar so the mouse click matches the visual movement */
.es-slider-draggable-rail {
transform: none !important;
}

/* We force the Handle to obey the original JS logic /
.es-slider-draggable-rail [class=“Handle”] {
transform: none !important;
}

/* We align the MIN (2) and MAX (10) numbers correctly /
/ 2 goes on the Left (Empty), 10 goes on the Right (Full) /
[class=“es-slider-labels-container”] {
display: flex !important;
flex-direction: row !important; /* Standard LTR order /
direction: ltr !important; / Forces 2 to stay on left, 10 on right */
justify-content: space-between !important;
width: 100% !important;
}

/* — 3. RADIO BUTTONS (RTL) — /
/ This keeps your radio buttons perfectly right-aligned */
.es-choice-option-label {
display: flex !important;
flex-direction: row-reverse !important;
justify-content: flex-start !important;
align-items: center !important;
width: 100% !important;
}

.es-choice-option-item-label {
margin-left: 0 !important;
margin-right: 8px !important;
text-align: right !important;
flex-shrink: 0 !important;
}

.es-choice-option-container {
margin: 0 !important;
display: flex !important;
align-items: center !important;
}

[Max]

That’s great, thanks for the update!

The only thing you wanted to change the dragging direction of the slider control, right?

I’ve discussed it with the devs and, unfortunately, there is no way to implement this customization now. I am really sorry!

If you have any questions left, we’re always here to help