euvl / vue-js-modal

Easy to use, highly customizable Vue.js modal library.
http://vue-js-modal.yev.io
MIT License
4.35k stars 592 forks source link

text-align on v-modal causes problems in RTL languages #784

Open NateWr opened 1 year ago

NateWr commented 1 year ago

Problem:

When using a right-to-left language, like Arabic, text should flow from the right of the screen to the left. However, the modal has a CSS rule that applies text-align: left which cascades to the content inside of the modal.

Version:

1.3.35

Example & screenshots:

The CSS rule that causes the problem is:

.v--modal {
  text-align: left;
}

In the screenshot below, you can see how it is effecting a page with <body dir="rtl">. (The <input> options should start on the right.)

v-modal-align-left

In the screenshot below, I fixed this by adding .v--modal.v--modal { text-align: unset; } to my own code.

v-modal-align-none

I have checked stackoverflow for solutions and 100% sure that this issue is not not related to my code.

This CSS rule can be seen in effect on the demo site.