bootstrap-select doesn't support RTL

SamerX commented 9 years ago

When using bootstrap-select with RTL websites it should render from right to left, RTL mainly is done using dir attribute on body, bootstrap select doesn't support RTL

aagouda commented 9 years ago

I am having the same issue with RTL I am using Bootstrap RTL support from here

https://github.com/morteza/bootstrap-rtl

The problem only with the button and cart, the text is always left and the cart right.

The problem I guess with this css:

.bootstrap-select.btn-group .btn .filter-option {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    text-align: left; /* in RTL text-align: right; will fix it */
}
and for the cart, this css:
.bootstrap-select.btn-group .btn .caret {
    position: absolute;
    top: 50%;
    right: 12px;  /* left: 12px; will fix it*/
    margin-top: -2px;
    vertical-align: middle;
}

I think you should restrict for using pull left and pull right classes of bootstarp.

Note for using bootstrap-rtl, the author refused to convert the pull-left and pull-right classes so you have to implement these yourself. Just append these css classes to the end of bootstrap-rtl.css:

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

The fork with this modifications here:

https://github.com/mewsoft/bootstrap-rtl

margani commented 8 years ago

Thanks so much for this great answer. For caret it's better this way:

.bootstrap-select.btn-group .btn .caret {
    position: absolute;
    top: 50%;
    left: 12px;
    right:auto; /* this line should be added to override the default behavior */
    margin-top: -2px;
    vertical-align: middle;
}

Also for better style this should be added:

.bootstrap-select > .dropdown-toggle {
    padding-left: 25px;
    padding-right: 15px;
}

ahmedam55 commented 8 years ago

thanks for the comment @margani and thanks for the question @SamerX

surenderpicnframes commented 8 years ago

Thanks margani its really works

yasharvc commented 7 years ago

Hi, Try setting text-align:right in .filter-option class...

mutazharara commented 7 years ago

Hi, Actually for better style this should be added: .bootstrap-select.btn-group .dropdown-toggle .filter-option { text-align: right; } .bootstrap-select>.dropdown-toggle { padding-left: 25px; padding-right: 12px; } .bootstrap-select.btn-group .dropdown-toggle .caret { right: initial; left: 12px; } .bootstrap-select.btn-group .dropdown-menu li a{ text-align: right; } .bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text{ margin-right: 0; margin-left: 34px; } .bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark{ right: initial; left: 15px; }

kmuharam commented 6 years ago

This worked for me:

.bootstrap-select.btn-group .btn .filter-option {
    display: inline-block !important;
    overflow: hidden !important;
    width: 100% !important;
    text-align: right !important; 
}

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
    float: right;
}

Farshadi73 commented 6 years ago

If you have problem with dropdown-toggle direction, try this, work for me

.dropdown-toggle::after {
  float: left;
  margin-top: 0.6em;
  vertical-align: 0.1em;
}

iyadthayyil commented 6 years ago

This worked for me with Bootstrap 4 and https://github.com/morteza/bootstrap-rtl

/*Bootstrap select RTL fix*/
.dropdown-toggle::after {
    float: left;
    margin-top: 0.6em;
    vertical-align: 0.1em;
}
.bootstrap-select .dropdown-toggle .filter-option {
    text-align: right!important;
}
.bootstrap-select .dropdown-toggle .filter-option-inner {
    padding-right: 0!important;
}

mbsaberi commented 5 years ago

.bootstrap-select .dropdown-toggle .caret {
    right: auto !important;
    left: 12px !important;
}

.bootstrap-select .dropdown-toggle .filter-option {
    text-align: right !important;
    padding-right: 5px !important;
}

meisamdev commented 4 years ago

.bootstrap-select.form-control { margin-right: 10px; }

.bootstrap-select .dropdown-menu.inner { text-align: right !important; }

.bootstrap-select .dropdown-toggle .filter-option-inner-inner { text-align: right !important; padding-left: 25px !important; padding-right: 15px !important; }

I'm using this.

mohamadRaafatKamel commented 3 years ago

this work with me

/Bootstrap select RTL fix/ .dropdown-toggle::after { float: left; margin-top: 0.6em; vertical-align: 0.1em; } .bootstrap-select .dropdown-toggle .filter-option { text-align: right!important; } .bootstrap-select .dropdown-toggle .filter-option-inner { padding-right: 0!important; } / for menu / .bootstrap-select .dropdown-menu .inner .dropdown-menu { text-align: right!important; }

snapappointments / bootstrap-select

bootstrap-select doesn't support RTL #862