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
  • #37313
Closed
Open
Issue created Oct 13, 2022 by Administrator@rootContributor3 of 3 checklist items completed3/3 checklist items

Fix `.form-control` padding for date/time inputs

Created by: WinterSilence

Prerequisites

  • I have searched for duplicate or closed issues
  • I have validated any HTML to avoid common problems
  • I have read the contributing guidelines

Describe the issue

Some browsers (for example, FF and Chrome) add extra "padding" to date/time inputs when calculate area of visible text. As result, part of text is hide:

изображение

Need fix padding-right:

[type="date"].form-control,
[type="time"].form-control,
[type="datetime"].form-control,
[type="datetime-local"].form-control {
    padding-right: ...;
}

+ same fixes for .form-control-sm and .form-control-lg

Reduced test cases

[type="date"].form-control {
    width: 8rem;
}
[type="date"].form-control-sm {
    width: 7rem;
}
[type="time"].form-control {
    width: 5rem;
}
[type="time"].form-control-sm {
    width: 4.5rem;
}
[type="datetime"].form-control,
[type="datetime-local"].form-control {
    width: 11.5rem;
}
[type="datetime"].form-control-sm,
[type="datetime-local"].form-control-sm {
    width: 10.5rem;
}
<input type="datetime-local" name="from" class="form-control" value="2022-12-28 13:30">
<input type="time" name="to" class="form-control" value="13:30">
<input type="datetime-local" name="from" class="form-control form-control-sm" value="2022-12-28 13:30">
<input type="time" name="to" class="form-control form-control-sm" value="13:30">
<input type="datetime-local" name="from" class="form-control form-control-lg" value="2022-12-28 13:30">
<input type="time" name="to" class="form-control form-control-lg" value="13:30">

What operating system(s) are you seeing the problem on?

Windows, macOS, Android, iOS, Linux

What browser(s) are you seeing the problem on?

Chrome, Firefox

What version of Bootstrap are you using?

v.5.*

Assignee
Assign to
Time tracking