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

Fix to make select dropdown arrow show on left side when using tailwindcss-forms #18

Open
mattlangeman opened this issue Jan 6, 2021 · 1 comment

Comments

@mattlangeman
Copy link

I ran into an issue with making the arrow for the select dropdown show on the left side of the box with for rtl languages. This is an issue specific to the tailwindcss-forms plugin as it adds in the arrow as a background image.

Tailwind_Select_Box_nofix

Not sure if tailwindcss-rtl is the right place for this but here is the quick fix I made.

[dir="rtl"] select {
    background-position: left 0.5rem center;
    padding-left: 2.5rem;
}

Tailwind_Select_Box_rtl

@yc-codes
Copy link

yc-codes commented Aug 4, 2021

Adding these lines works fine

@20lives
consider adding this

[dir="rtl"] .form-select {
    background-position: left 0.5rem center;
}

/* For those who use it direct */

[dir="rtl"] select {
    background-position: left 0.5rem center;
}

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

2 participants