Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #24504
Closed
Open
Issue created Oct 22, 2017 by Administrator@rootContributor

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):

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;
}
Assignee
Assign to
Time tracking