Vue-js-modal: Arabic Problem Position

[ionutt]

Problem:

When the body has direction: rtl, the position of the modal is way off.
The left should be switch to right. Any suggestion how to do an hack of this?
...

Example & screenshots:

...

I have checked stackoverflow for solutions and 100% sure that issue not in my code.

[the-ashraf]

this happens because the modal is positioned using an absolute left style. you can go around it using this dirty hack.

edit to remove the hack code.

[ionutt]

Thanks for this. I was think about that but for this is a hack, and also what will we do if there is an screen resize or I think that we can drag the modal, we need to think of this use case.

My aproach was different.

• detect the direction or language on the body ( direction: rtl )
• if arabic apply a class on the modal wrapper to change the direction ( direction: ltr ).
• if arabic apply a class on component inside the modal ( direction: rtl )

Hope these solution will help other developers.

[the-ashraf]

i concede that your approach is absolutely cleaner and way simpler 😄

[henfreire]

I add a custom css in v--modal
.v--modal {
text-align: right;
left: 0px !important;
margin: 0 auto;
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed.

[amirehman]

I handled this issue like this.

<div :class="{'ltr': $i18n.locale === 'ar'}">
  <modal name="subscribe" height="auto" :scrollable="true">
    <div class="text-center pt-5 lg:pt-0" :class="{'rtl': $i18n.locale === 'ar'}">
      <!-- content goes here -->
    </div>
  </modal>
</div>