Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RTL Problem solution #21

Open
mortezafs opened this issue Jun 16, 2019 · 2 comments
Open

RTL Problem solution #21

mortezafs opened this issue Jun 16, 2019 · 2 comments

Comments

@mortezafs
Copy link

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
Copy link
Owner

ttskch commented Jul 12, 2019

@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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants