RTL Problems

[WaleedZ90]

There is a problem and there is a question that I want to ask.

The problem:

There is a problem with the sidebar.

Steps:

• include bootstrap rtl.
• apply "rtl-active" class (optional).
• Hover the mouse over the sidebar and Scroll. Output: The side bar content disappears, it drifts away.

Another issue.

• include bootstrap rtl.
• don't apply the "rtl-active" class.
• Check the sidebar text. Output: All the text is aligned right although "rtl-active" wasn't applied.

The Question:

I don't know whether this question is out of your scope or not. But is there a way to make this bootstrap-rtl script works only if an RTL language is selected (for example from a language dropdown list)? Instead of changes being applied right away when this script is imported?

Thank you very much.

[chelaruc]

@WaleedZ90 the errors you have got on the sidebar when you have rtl active is because perfectscrollbar doesn't support rtl for now. See this pull requests: https://github.com/utatti/perfect-scrollbar/pull/744 and https://github.com/utatti/perfect-scrollbar/pull/750.

[DanishFayaz]

@chelaruc, thanks for the perfect-scrollbar patch link. I added that and got the menu fixed, but there's one thing that's causing an issue. When I add the bootstrap-rtl css after the bootstrap.css the menu dropdown icons (carret) get RTL applied on it while I've not added the rlt-active class on the body. Can you take a look at the issue?

[khoramshahy]

hi, your doc is not update! I'v just bought the BS4 version. there is not angular-cli.json in proj. instead it has angular.json. and in that file there is no "../node_modules/bootstrap-rtl/dist/css/bootstrap-rtl.css" direction in style section! do you really have RTL support or not?!!

[chelaruc]

@khoramshahy see this comment with what changes you need to do for RTL.