RTL Functionality

Ask the Community Customization
1

It doesnt look good as of now if it doesnt have settings for RTL.

2

Hi there @HIRUNDO_AE_SERVICES :wave:

Thanks for adding your idea!

We agree that it would be awesome to have this setting right in the configurator. We’ll try to consider its implementation in the future updates.

As a workaround, you can use in this code in the Custom CSS field on the Style tab of your widget’s settings:

[class*="schedule-block__ItemsContainer-sc"]:first-of-type {
  grid-auto-flow: row dense;
}

[class*="schedule-block__ItemsContainer-sc"]:first-of-type *:nth-child(even) {
  grid-column: 1;
}

[class*="schedule-block__ItemsContainer-sc"]:first-of-type *:nth-child(odd) {
  grid-column: 2;
}

Give it a try and let me know if you like the result :wink:

3

Hi Max,

Thanks for picking up the ticket.
Actually It didn’t change much…

I think its more the need to replace the columns as a whole

so the column that includes the Contacts in section Content will move to be the “first Column” fro the right
and so on on the other columns…

Can you check that ?

Many thanks!

4

@HIRUNDO_AE_SERVICES You’d like to position the Contact section like in this screenshot, right?

image
image1407×968 57.5 KB

However, I don’t quite understand how you’d like to place other sections, as currently they are placed in one column. Could you please elaborate on it?

5

Hey Max,

As you can See in English.
Imagine an exact mirror.
I mirrored EN Widget in the Image editing app, so of course the words now look strange, but I think you get the idea…:wink:

image.png
image.png1032×658 37.5 KB

Can we have it looking exactly the same?

BTW - Can special days be in another column after the Working hours? (in both English and RTL)

Many thanks

6

Do you want to apply this mirror effect to both English and Hebrew versions?

If it is, would you like to display the Contact section at the right top corner for both widgets, or it should be at the right bottom for the Hebrew version?

7

The English is perfect.
only the HEB version I need your support.

Many thanks!

8

Okay! I’ve shared your request with the devs and will get back to you after the weekends :wink:

9

Hi there @HIRUNDO_AE_SERVICES :wave:

This code should work for you:

@media (min-width: 768px) {
  [class*='schedule__Container-sc'],
  [class*='multi-column-layout__ContainerWithHeader-sc']
    [class*='multi-column-layout__BusinessContactsAndHoursContainer-sc'] {
    flex-direction: row-reverse;
    align-items: start;
  }

  [class*='schedule__Container-sc'] {
    justify-content: flex-end;
  }

  [class*='multi-column-layout__ContainerWithHeader-sc'] {
    display: flex;
    position: relative;
  }

  [class*='business-info__Container-sc'] {
    flex: 0 0 auto;
  }

  [class*='multi-column-layout__BusinessContactsAndHoursContainer-sc']
    > :first-child {
    position: absolute;
    top: 0;
  }
}

Try it out and let me know if you like the result :slightly_smiling_face:

10

Hey!

Seems Like it’s going to be a bit more challenging than we thought…

11

Look Like I managed…
Some small tweeks… its perfect!

@media (min-width: 768px) {
[class*=‘schedule__Container-sc’],
[class*=‘multi-column-layout__ContainerWithHeader-sc’]
[class*=‘multi-column-layout__BusinessContactsAndHoursContainer-sc’] {
flex-direction: row-reverse;
align-items: start;
}

[class*=‘schedule__Container-sc’] {
justify-content: flex-end;
}

[class*=‘multi-column-layout__ContainerWithHeader-sc’] {
display: flex;
position: relative;
}

[class*=‘business-info__Container-sc’] {
flex: 1 0 Auto;
}

[class*=‘multi-column-layout__BusinessContactsAndHoursContainer-sc’]

:first-child {
position: Auto;
top: 1;
}

}

12

Hey there @HIRUNDO_AE_SERVICES :wave:

Happy to see that you’ve adjusted the code to your liking! If anything else comes up, we are always here to help :wink: