Geek Answers Handbook

Width width between ltr and rtl languages

After many readings and searching for SO threads, I almost have my popovers that work as I want them with different languages ​​- except for the following problem:

I have a difference in the width of my bootstrap 3 popovers between the ltr languages ​​(English, French, German, etc.) and the rtl languages ​​(Arabic, Hebrew, etc.).

In my ltr langauges, the width of the popover is only as wide as it should be - with a maximum width of 600 pixels, as shown below:

enter image description here

In my rtl languages, the width of a popover is the maximum width of 600 pixels instead of a width that should be as wide as it should be, as shown below:

enter image description here

I am not sure why this is happening. I read many, many SO posts and searched google extensively, but I cannot solve this problem.

Can someone please indicate why there is a difference in widths between my ltr and rtl sheets? I want to make rtl popover as wide as necessary. It might be a simple fix, but I just don't see the problem.

The above two screenshots show the same information (from the database), just using different CSS files depending on the rtl / ltr language.

Here is my ltr css code :

.popover { direction: ltr; position: fixed; word-break: normal; word-wrap: break-word; z-index: 9999; background-color: lavender; } .popover.right { background-color: blueviolet; margin-left: 17px; max-width: 600px; } .popover.left { background-color: gold; margin-right: 0px; min-width: 375px; }

Here is the rtl css code :

 .popover { direction: rtl; position: fixed; word-break: normal; word-wrap: break-word; z-index: 9999; background-color: khaki; } .popover.right { background-color: indianred; margin-left: 17px; min-width: 375px; } .popover.left { background-color: lightsteelblue; margin-left: -17px; max-width: 600px; }
+5
source share
1 answer

After checking the .popover css class in bootstrap-rtl.min.css and changing various values, I was able to determine the cause of this problem.

The .popover css class bootstrap-rtl.min.css has a value:

 .popover { .... right: 0; .... }

Here is a description of this right css property.

If I change the above value to the following, the problem will be resolved:

 .popover { .... right: 1; .... }

The problem with displaying popover that displays only the width that should be (with a maximum width of 600 pixels) for the rtl language has been resolved.

I hope this helps someone.

+3
source

More articles:


All Articles