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

new option for dropdown position #1172

Closed
3 tasks done
dirslashls opened this issue Jan 17, 2023 · 2 comments
Closed
3 tasks done

new option for dropdown position #1172

dirslashls opened this issue Jan 17, 2023 · 2 comments

Comments

@dirslashls
Copy link

Prerequisites

  • I am running the latest version
  • I checked the documentation and found no answer
  • I checked to make sure that this issue has not already been filed

When using tagify in single-select mode and the position is set to "all" the dropdown occupies the entire width of the input field. However, I have some select options that are very large (and some without even any spacing to wrap them). When a smaller width value is selected, the input field is small and so the dropdown is very narrow that it is not possible to clearly see the options. When a larger width value is selected, the input expands and then the dropdown becomes usable.

I noticed that using position as "text" renders the dropdown wide enough all the time. I would have used this option but it starts showing the dropdown list at the location where cursor is placed.

So, I am wondering if there is a way to get the benefit of both these position options. That is, the dropdown should start below the input field but extend beyond the size of the input field so it is possible to clearly see large options.

@yairEO
Copy link
Owner

yairEO commented Jan 18, 2023

I will look into it, I understand the situation.

Something like this?

https://jsbin.com/luduquz/2/edit?css,output

.tagify__dropdown {
    max-width: none !important;
}

.tagify__dropdown .tagify__dropdown__item {
    white-space: nowrap;
}

@dirslashls
Copy link
Author

Yes, that is what I am looking for. Thank you.

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

No branches or pull requests

2 participants