popover width issue between ltr and rtl languages

Question

After a lot of reading and searching SO threads, I almost have my popovers working as I want them with different languages - except for the following issue:

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

In my ltr langauges the width of the popover is only as wide as it needs to be - with a max-width of 600px;, as displayed below:

In my rtl languages, the width of the popover is the max-width of 600px instead of the width being only as wide as it needs to be, as displayed below:

I am unsure why this is happening. I have read many, many SO posts and searched google extensively, but I cannot solve this issue.

Can anyone point out why there is a difference in the widths between my ltr and rtl language popovers? I am wanting to make the rtl popover only as wide as it needs to be. This may be a simple fix, but I just can not see the issue.

The above two screen shots 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;
}

Can you replicate the issue with a demo? http://stackoverflow.com/help/mcve — m4n0, Sep 01 '15 at 06:32
Manoj Kumar - replicating the issue is proving difficult as the language direction of the page/site are different - jsfiddle does not allow this. — user1261774, Sep 01 '15 at 06:53

score 3 · Accepted Answer · answered Sep 01 '15 at 23:42

After checking the .popover css class in the bootstrap-rtl.min.css and changing different values I have managed to pinpoint the cause of this issue.

In the .popover css class of bootstrap-rtl.min.css there is a value:

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

Here is a description of this right css property.

If I change the above value to the following, the issue is resolved:

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

The issue regarding the popover displaying only as wide as it needs to be (with a max-width of 600px) for the rtl language is solved.

I hope that this will help someone.

The `right: 1` is not valid css value, must use this: `right: auto !important;`, and so for better show arrow can use this: `.popover > .arrow, .popover > .arrow::after {left: 0;}` — Nabi K.A.Z., Jan 21 '17 at 02:30

popover width issue between ltr and rtl languages

1 Answers1