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
No text truncation for multi select dropdown #4343
Comments
One possible fix .select-wrapper input.select-dropdown {
...
padding-right: 10px;
box-sizing: border-box;
text-overflow: ellipsis;
} or .select-wrapper input.select-dropdown {
...
padding: 0px 10px 0px 0px;
box-sizing: border-box;
text-overflow: ellipsis;
} See http://caniuse.com/#feat=text-overflow and notice also the problems
|
@DanielRuf the workaround did work, thank you very much! It will suffice until the issue is fixed. 👍 |
@fega do we need a PR? Should I prepare one? @tomscholz thoughts against / for this fix? |
While the suggested text-overflow makes the value display nicer. In my case, it would be more valuable to see all of the options that have been selected. What if the input were changed to a textarea so the value display could show multiple lines? |
I found a fix. If you add the class The fix mentioned earlier using text-overflow didn't work for me testing on chrome. |
Description
I'm using the multiselect dropdown and I have quite a few options, close to 11 and most of the times I will have at least 6 selected. When that happens, the text goes under the dropdown arrow and it looks bad.
Repro Steps
Add the following dropdown into a page:
Heres a link to a codepen:
http://codepen.io/anon/pen/PpjrWe
Screenshots / Codepen
Issue:
Fix 1: (Expand the text box dynamically like in selectivity.js)
Homepage link
Fix 2: (Show the count of the number of items selected)
Link to demo
It would be great if you could give the user an option of using either modes.
Thank you!
The text was updated successfully, but these errors were encountered: