select2-bootstrap4-theme icon indicating copy to clipboard operation
select2-bootstrap4-theme copied to clipboard

RTL Problem solution

Open mortezafs opened this issue 5 years ago • 2 comments

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;
}

mortezafs avatar Jun 16 '19 09:06 mortezafs

@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...

ttskch avatar Jul 12 '19 07:07 ttskch

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

hr-sadooghi avatar Nov 03 '19 12:11 hr-sadooghi