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

Custom-select doesn't support single select with size attribute set above 1 #24504

Closed
tmorehouse opened this issue Oct 22, 2017 · 1 comment
Closed
Assignees

Comments

@tmorehouse
Copy link
Contributor

tmorehouse commented Oct 22, 2017

The size attribute controls the number of visible "rows" the select displays. It is commonly used in conjunction with the multiple attribute, but can be used on single selects to produce a "list-box" style select (except on some mobile browsers).

When used on a .custom-select, not in multiple mode, the size attribute is not respected and only single option (and bits of the next option) are shown (as well as bits of the custom select indicator):

image

As an aside note, when in multiple mode, there is also excess padding on the right (where the custom indicator would be on a single select)

Workaround CSS:

.custom-select[multiple],
.custom-select[size]:not([size="1"])
{
    height: auto;
    background-image: none;
    /* Fix for excess right padding */
    padding-right: 0.75rem;
}
@jipexu
Copy link
Contributor

jipexu commented Oct 23, 2017

yep this is very usefull i will test thanks ! this seems work well

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

5 participants