ttskch / select2-bootstrap4-theme

Select2 v4 theme for Bootstrap4
MIT License
434 stars 207 forks source link

RTL Problem solution #21

Open mortezafs opened 5 years ago

mortezafs commented 5 years ago

Hello. first of all thanks for creating this theme and syncing Select 2 with Bootstrap 4 I added a few lines to your code to resolve the problem of compatibility with RTL direction. You can add these lines to your codes to solve the problem.

html[dir='rtl'] .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    margin-left: auto;
    margin-right: -4px;
}
html[dir='rtl'] .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow
{
    left: 3px;
    right: auto;
}
html[dir='rtl'] .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice
{
    padding-right: 0;
    padding-left: 5px;
    float: right;
    margin-right: 0;
    margin-left: 5px;
}
html[dir='rtl'] .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove
{
    margin-left: 1px;
    margin-right: 3px;
    float: right;
}
html[dir='rtl'] .input-group-prepend ~ .select2-container--bootstrap4 .select2-selection {
    border-top-right-radius: 0;
    border-top-left-radius: 0.2rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0.2rem; }
html[dir='rtl'] .select2-container--bootstrap4 .select2-selection__clear {
    padding-right: 0.3em;
    padding-left: 0;
    float: left;
    margin-right: auto;
    margin-left: 0.3em;
}
ttskch commented 5 years ago

@mortezafs Thanks for your idea. I want to fix this problem FUNDAMENTALLY but I cannot find way to do that yet 😓When I load only select2 and bootstrap4 and set dir: "rtl" to select2 config, somehow RTL doesn't work correctly 🤔

image

I'm struggling to solve this issue...

hr-sadooghi commented 4 years ago

You may need text-align: right; in addition to RTL direction.