select2-bootstrap4-theme
select2-bootstrap4-theme copied to clipboard
RTL Problem solution
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 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 🤔
I'm struggling to solve this issue...
You may need text-align: right;
in addition to RTL direction.