Flipped rendering for *-right and *-left #57
Comments
|
good idea |
|
Hey, Thanks. |
|
You can do it very easily. I do not know what is your server side language but the idea is simple. Always load bootstrap.css, if your site is in RTL mode, add bootstrap-rtl css |
|
@afattahi54 So I guess the answer is, if rtl.css is loaded, I can't switch back to LTR, right? |
|
Yes you can? If the page is reloaded from server you can only load bootstrap.css, if you want to switch page direction, with javascript you can remove the bootstrap-rtl.css with javascript as mentioned in http://stackoverflow.com/questions/24087152/remove-css-file-with-javascript |
|
@asaf if(document.getElementsByTagName('html')[0].dir != "rtl"){
document.write('<link href="bootstrap.min.css" rel="stylesheet">');
} else {
document.write('<link href="bootstrap-rtl.min.css" rel="stylesheet">');
} |
|
@AlexYudaev |
|
@afattahi54 |
|
I use AngularJS, so use ng-if to pull in the relevant file: <link rel="stylesheet" href="bower_components/bootstrap-rtl/dist/css/bootstrap-rtl.css" ng-if="getCurrentLanguage().rtl"/>I also use an ng-class on the body to add an rtl class: <body ng-class="{rtl:getCurrentLanguage().rtl}">I then use css to set the text direction and override bootstrap classes rather than going around adding .rtl {
direction: rtl;
}
.rtl .pull-right {
float: left !important;
}
.rtl .pull-left {
float: right !important;
}
.rtl .dropdown-menu-right {
left: 0;
right: auto;
}
.rtl .dropdown-menu-left {
left: auto;
right: 0;
} |
|
Thanks guys, I just wanted to ensure that while the rtl css loaded there's no way to revert back to LTR, @willi1s Nice trick with the ng-if, Shame on Ember.js not having anything that completes with param level directives. Thanks! |
|
Though I agree this is dirty method, I am able to fix this issue with my asp.net MVC5 project with the help of Resource files. I added a resource setting with blank value inside default one and with value that is pointing to bootstrap-rtl.min.css. Then I added this into @Html.Raw which would print the css link tag either empty or tag. Resource.resx Resource.ar.resx Index.html Hope this helps asp.net mvc guys. |
Semantics for
rightandleftare not changed in bootstrap-rtl theme, and you need to add a custom.flipclasses to a.pull-rightand.pull-leftentity if it needs to be rendered from right to left (instead of left to right). It would be convenient to create additional css file (e.g.bootstrap-flipped.css) so this flipping process could be automated without the.flipclass.However, due to the consistency of meanings of the words, flipping would never happen to the
.pull-rightand.pull-leftinbootstrap-rtl.cssfile.The text was updated successfully, but these errors were encountered: