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
  • #34195
Closed
Open
Issue created Jun 07, 2021 by Administrator@rootContributor

Color controls can shrink beyond recognition

Created by: ndm2

Playing with the color controls and auto-sizing columns, I've noticed that color controls can shrink to the point of being unusable.

I'm not quite sure whether this is considered a bug, or if for some reason it actually is intended behavior. There doesn't seem to have been a change ever since the control was first introduced, so maybe the max-width property should have been width or min-width instead.

  • Version: 5.0.1
  • OS: independent
  • Browser: independent

Example:

<fieldset class="row">
  <legend>Border Color</legend>
  <div class="col-auto text-center">
    <label>T</label>
    <input type="color" class="form-control form-control-color" value="#563d7c">
  </div>
  <div class="col-auto text-center">
    <label>L</label>
    <input type="color" class="form-control form-control-color" value="#563d7c">
  </div>
  <div class="col-auto text-center">
    <label>R</label>
    <input type="color" class="form-control form-control-color" value="#563d7c">
  </div>
  <div class="col-auto text-center">
    <label>B</label>
    <input type="color" class="form-control form-control-color" value="#563d7c">
  </div>
</fieldset>

Result:

Desktop

image

Mobile Chrome 90.0.4430.210

image

Mobile Safari 14.0.1

image

https://jsbin.com/wamavojohe/edit?html,output

Assignee
Assign to
Time tracking