Skip to content
GitLab
    • Explore Projects Groups Snippets
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
  • Merge requests
  • !28243

fix: remove 100% width on `.form-control` when is `.flex-grow-1`

  • Review changes

  • Download
  • Email patches
  • Plain diff
Closed Administrator requested to merge github/fork/dahfazz/patch-1 into v4-dev 6 years ago
  • Overview 0
  • Commits 1
  • Pipelines 0
  • Changes 1

Created by: dahfazz

Inside a flex container, one may set a .flex-grow-1 class on element to give it the available space.

When element is a .form-control, that rule is broken because of width: 100% property.

I wrote a demo on codepen -> https://codepen.io/dahfazz/pen/PVajJx

Compare
  • v4-dev (base)

and
  • latest version
    c02e1e4f
    1 commit, 2 years ago

1 file
+ 4
- 1

    Preferences

    File browser
    Compare changes
scss/_forms.scss
+ 4
- 1
  • View file @ c02e1e4f


@@ -6,7 +6,6 @@
.form-control {
display: block;
width: 100%;
height: $input-height;
padding: $input-padding-y $input-padding-x;
font-family: $input-font-family;
@@ -17,6 +16,10 @@
background-color: $input-bg;
background-clip: padding-box;
border: $input-border-width solid $input-border-color;
&:not(.flex-grow-1) {
width: 100%;
}
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
@include border-radius($input-border-radius, 0);
0 Assignees
None
Assign to
0 Reviewers
None
Request review from
Labels
0
None
0
None
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
2
2 participants
Administrator
Ghost User
Reference: twbs/bootstrap!28243
Source branch: github/fork/dahfazz/patch-1

Menu

Explore Projects Groups Snippets