morteza / bootstrap-rtl Goto Github PK

Hello Sir

i have found some alignement class missedin your css , the class are

.pull-right{float:left!important}
.pull-left{float:right!important}
.text-right {text-align: left;}
.text-left {text-align: right;}

in navbar navbar-right class, elements are still aligned to right and supposed to go left while RTL!

Hello,

I have included bootstrap-rtl.min in 'FixIt' sample application (from Microsoft).
Everything looks good, except the 'Remember Me' chackbox, where the box is located way far to the left of the text when where It should really be placed is to the right of the text.

Great work!
Thanks

justified btn groups is not working, neither With <a> elements, nor With <button> elements

Thank you for your efforts,
But I suggest to use an independent css and not an extension
because the page first is rendered by the original css and then is rendered by your css

it cause a flicker on loading the page, I mean the page first is from left to right then flicks from right to left which is not ideal, also it make slow loading

dear Morteza
i have a problem with label in radio button.
i want create form with in line radio button like attachment file.
best regards

My code:

        <label class="radio-inline">
                <input type="radio" name="radioUserType">دانشجو
        </label>
        <label class="radio-inline">
                <input type="radio" name="radioUserType"> کارشناس
        </label>

Should load only one of them

Hello,
I am testing 3.2 RC3 and it has some issue with popovers which I figured is because of the the right:0 css property assigned to .popover.
I removed that and everything is working fine.

Keep up with the good work,
Mahdi

It seems that there's a padding issue in select dropdowns as you can see in the attached image.

i'm trying to compile the most trivial less stylesheet:

@import "../lib/bootstrap/less/bootstrap.less";
@import "../lib/bootstrap-rtl/less/bootstrap-rtl.less";

the less compiler eats CPU/Memory endless!

i go deep in code and find out that grid-framework and grid-framework-rtl mixins together making the issue (as former included in bootstrap.less and the latter included in bootstrap-rtl.less).
removing one of them from import make everything ok

Details by H. Ghodsifar:

When new slide appears, it enters from the left but the current one doesn't exit from the right side, instead it goes back and exit from the left, and you can see the white background when slides are changing.

سلام و درود بر تو مرتضی
ممنون از کاری که برای مجموعه انجام دادی.
از اون جایی که راست به چپ کردن نوشته ها فقط تغییر ساختاری هستش بهتره که تغییر رنگها از فایل بوت استرپ فارسی حذف بشه و تغییر
رنگها فقط تو فایل
variables.less
بوت استراپ اصلی تغییر کنه.

با آزروی موفقیت برای تو دوست عزیز

Hi Morteza,

I wanted to download from the previous repository but it does not exists.

Thanks,

i haven't tested your project yet, so i might be wrong
but just by looking, it seems that:
in the file alerts-rtl.less line 18
need to be:
left: -21px;
and not
left: 21px;
so the closing 'x' will be in the correct (flipped) position.

edit: and i think also (to cancel the ltr: right: -21px;)
right: auto;
instead of
right: 0;

since using at the same time
right: 0; + left: -21px; (or even left: 21px) do not really work, ;)

edit: tested locally (installed with bower, add 'Dismissible alerts' markup to:
bower_components/bootstrap-rtl/examples/rtl/index.html)
and made a tiny PR

Hi @morteza,

According to bootstrap docs, in order to right/left align the dropdown menu, '.dropdown-menu-right'/'.dropdown-menu-left' classes should be used. After linking the RTL theme, these classes were ignored.

The work around right now is to add '.pull-right'/'.pull-left' to the ''.dropdown-menu' element, but this solution is deprecated according to the docs.

When applying the has-error with input-group the border-right-color will not apply

It seems that we must put below css in order to have error color show in the right border too
.has-error .input-group-addon:first-child{
color:#ec0000 !important;
border-color:#ec0000;
background-color:#f2dede
}

The bootstrap-rtl has below selector which prevents correct color on right border:
.input-group-addon:first-child{
border-right:1px solid #ccc;
border-left:0
}

It would be great to have one.

Semantics for right and left are not changed in bootstrap-rtl theme, and you need to add a custom .flip classes to a .pull-right and .pull-left entity 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 .flip class.

However, due to the consistency of meanings of the words, flipping would never happen to the .pull-right and .pull-left in bootstrap-rtl.css file.

Currently the bootstrap-rtl version of cdnjs is stuck at v3.2.0-rc2, which is too old. Somebody has to send a pull request for the updated version.

Corresponding distribution packages for cdnjs are available under dist/cdnjs/* directory.

I am not familiar with github, so i post my issue with RTL radios and checkboxes here.
i think the following snippet:

.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  float: right;
  margin-right: 20px;
  margin-left: 0;
}

must replace with:

.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  margin-right: -20px;
}

sample:

<div class="col-md-12">
    <ul class="nav nav-pills nav-justified">
      <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
      <li><a href="#">Profile <span class="badge badge-danger">42</span></a></li>
      <li class="dropdown open">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">@fat</a></li>
          <li><a href="#">@mdo</a></li>
        </ul>
      </li>
    </ul>
</div>

Hi,
can you provide RTL support for bootswatch themes too ?
this version is working almost right with bootswatch themes but not 100%, it only needs miner adjustments.

it would be appreciated.

when adding bootstrap-rtl the width of the datepicker is get increased. I use this tool for datepicker https://github.com/eternicode/bootstrap-datepicker and it works fine without the bootstrap-rtl

When using a form with "form-inline" layout, the position of checkboxes and radio buttons is incorrect.

Here is the example code from the bootstrap documentation

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Here is the result. (This is with latin text, but I see the same problem with arabic/hebrew text).

.radio input[type="radio"],
.radio-inline input[type="radio"], 
.checkbox input[type="checkbox"], 
.checkbox-inline input[type="checkbox"]{
    float: right;
    margin-left: 0;
    margin-right: 20px;
}

margin-right should be -20px

Hi,

Since the bower version only downloads the bootstrap-rtl.css files it should have the basic bootstrap as a dependency. This can cause problems when using tools like wiredep to update the html with the css links.
Can you add "bootstrap" as a dependecy in the bower.json file?

navbar navbar-brand gets smaller in size in about 40px.

"botder-left" should be "border-left"

ignore...

Hi
After using Less with original bootstrap file bootstrap. rtl cause modal, not working!
Any solution

For right sliding you should add these lines to css:

.carousel-inner > .active {
right: 0;
}
.carousel-inner > .item {
transition: right 0.6s ease-in-out 0s;
}
.carousel-inner > .active.left {
right: -100%;
}
.carousel-inner > .active.right {
right: 100%;
}

Dear Mr Morteza
I am using bootstrap and I faced a problem in a .tag file.
I try to get a key, value, and unit (like 'max amount is' 'the amount' 'unit: like Rial,...').{ie:key valueArray unitArray} The 'the amount' is in "badge" class, but I loose the rtl correct form when i use it, and the 'the amount' field is moving to the end of line.{ie:key unitArray valueArray }

<%@tag
    description="Show a list of comma separated key,values as bootstrap list"
    pageEncoding="UTF-8"%>
<%@attribute name="key" description="Camma seperated list of keys"%>
<%@attribute name="value" description="Camma seperated list of values"%>
<%@attribute name="unit" description="Camma seperated list of units"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="s" uri="/struts-tags"%>

<c:set var="valueArray" value="${fn:split(value, ',')}" />
<c:set var="unitArray" value="${fn:split(unit, ',')}" />


<ul class="list-group">
    <c:forTokens items="${key}" delims="," var="name" varStatus="counter">
        <li class="list-group-item list-group-item-warning"
            style="font-size: 18px"><s:text name="%{#attr.name}" /><span
            class="badge mask-amount">${valueArray[counter.index]}</span>
        <s:text name="%{#attr.unitArray[#attr.counter.index]}" />
    </c:forTokens>
</ul>

Is there any solution to this problem I get?

discard...

The text and the checkbox inside a "form-horizontal" are displayed in wrong order, The box is displayed over the text

I suggest the following code:
.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
float: right;
margin-left: 0;
margin-right: -20px;
}

Hi,

I'm thinking of making a gh-pages branch for using bootstrap examples to test rtl.

I will use grunt-wiredep to automatically insert bootstrap-rtl theme file.

This package is available via the cloudflare CDN: http://cdnjs.com/libraries/bootstrap-rtl

But the latest package there is only 3.2.0-rc2

Can this be updated?

I noticed .flip exists only for .navbar-left (and not .navbar-right)
I was wondering if there is a reason for that?

As a workaround, I am currently using a simple css copied from distribution directory,and added the following:

.navbar-nav.navbar-left.flip {
  float: right !important;
}

and it seems to work fine.

p.s.
I can create a pull request if needed

Hi
I have problem with collapse navbar you can see in picture

when dropdown menu is open, scrollbars are appear !

I have read your comments in the other issue.

I am a WordPress Theme Developer. The themes are used by many people in the different languages. I am looking for a RTL solution that will work for most people.

I understand that you think the theme feature should be used for the RTL. I can also understand that not all css needs to be flipped and by making the changes by hand you can make sure that the css is correct.

Are there any other reasons why your version is better?

I am using Sass and that is why I am looking a Sass RTL solution.

please check the rule at line 1088

    .nav-pills > li {
         float: none;
    }

it must be floated to right direction

Hi,

I use popover with js and set placement as:
placement : "left auto"

The above code put the popover ( which is applied to inputs). Please see attached.

When using the RTL plugin the popover location will remain the same and will not switch.
Should I manage it manually change to: placement : "right auto" or the plugin can handle it ?!

I am suggesting to add the long discussioned topic on bootstrap website about this breakpoint.

Here is the CSS code for it, at least you can add it as a separate files as it is:

The original CSS code for this here:

https://gist.github.com/firepol/7942411

But it is missing some class for visibility and fixes, I did all and upload it here:

https://gist.github.com/mewsoft/91ff69da8996f81ca830

I also did the RTL version from this CSS in the file bootstrap_ms_rtl.css:

https://gist.github.com/mewsoft/91ff69da8996f81ca830#file-bootstrap_ms_rtl-css

Topics for this are here:

twbs/bootstrap#10203

I run to the real need to this range because the 768px is too large for Mobiles, until soon desktops were 640px.
I hope you consider this.
Thanks for your excellent effort.

there are an issue with the btn-group border style as it must be rounded where ehen you apply it you get squared buttons

the normal view is like this

Hi there ,

Can you use this plugin on bootstrap v3.3.0

Regards,
Alireza

Currently no license is associated with this project (be it MIT, GPL, or even public domain). This is a problem for businesses wanting to use this code, as without a license, it gains a natural copyright under your name. A license states how it can be used and by whom, which is required to allow a business to use this.

In order for me to be able to use this code, I need a license attached to it.

none is an invalid value for the padding and margin property. Set all those paddings and margins to initial instead.

Just waiting for them to release and freeze codes.