Custom-select doesn't support single select with size attribute set above 1
Created by: tmorehouse
- Bootstrap V4.0.0.-beta.2
- Operating system and version (any)
- Browser and version All
- Reduced test case https://codepen.io/tmorehouse/pen/boJQLL
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):
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;
}
