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;
}