From 34a1e454007a4071f97917b2f13d8a467fe421ab Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 19 Oct 2017 13:04:39 -0700 Subject: [PATCH 1/3] Add input group support for custom selects and custom files Closes #24437, closes #22457 --- _includes/docs-navbar.html | 2 +- docs/4.0/components/input-group.md | 93 +++++++++++++++++++++++++++++- scss/_input-group.scss | 31 ++++++++-- 3 files changed, 120 insertions(+), 6 deletions(-) diff --git a/_includes/docs-navbar.html b/_includes/docs-navbar.html index ecedf7c4d6..4f3e68738d 100644 --- a/_includes/docs-navbar.html +++ b/_includes/docs-navbar.html @@ -37,7 +37,7 @@
Latest (4.x) v4 Alpha 6 - v3.3.7 + v3.3.7 v2.3.2
diff --git a/docs/4.0/components/input-group.md b/docs/4.0/components/input-group.md index 231adc906c..251af2a01c 100644 --- a/docs/4.0/components/input-group.md +++ b/docs/4.0/components/input-group.md @@ -106,7 +106,6 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve {% endexample %} - ## Button addons Buttons in input groups must wrapped in a `.input-group-btn` for proper alignment and sizing. This is required due to default browser styles that cannot be overridden. @@ -230,6 +229,98 @@ Buttons in input groups must wrapped in a `.input-group-btn` for proper alignmen {% endexample %} +## Custom forms + +Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported. + +### Custom select + +{% example html %} +
+ Options + +
+ +
+ + Options +
+ +
+ + + + +
+ +
+ + + + +
+{% endexample %} + +### Custom file input + +{% example html %} +
+ Upload + +
+ +
+ + Upload +
+ +
+ + + + +
+ +
+ + + + +
+{% endexample %} + ## Accessibility Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies. diff --git a/scss/_input-group.scss b/scss/_input-group.scss index a1d16e3848..d242c904fd 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -30,20 +30,32 @@ .input-group-addon, .input-group-btn, -.input-group .form-control { +.input-group .form-control, +.input-group .custom-select, +.input-group .custom-file { display: flex; align-items: center; + &:not(:first-child):not(:last-child) { @include border-radius(0); } } +.input-group .custom-file { + display: flex; + align-items: center; +} + +.input-group .custom-select, +.input-group .custom-file { + width: 100%; +} + .input-group-addon, .input-group-btn { white-space: nowrap; } - // Sizing options // // Remix the default form control sizing classes into new ones for easier @@ -103,6 +115,8 @@ // .input-group .form-control:not(:last-child), +.input-group .custom-select:not(:last-child), +.input-group .custom-file:not(:last-child) .custom-file-control::before, .input-group-addon:not(:last-child), .input-group-btn:not(:last-child) > .btn, .input-group-btn:not(:last-child) > .btn-group > .btn, @@ -111,10 +125,14 @@ .input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn { @include border-right-radius(0); } + .input-group-addon:not(:last-child) { border-right: 0; } + .input-group .form-control:not(:first-child), +.input-group .custom-select:not(:first-child), +.input-group .custom-file:not(:first-child) .custom-file-control, .input-group-addon:not(:first-child), .input-group-btn:not(:first-child) > .btn, .input-group-btn:not(:first-child) > .btn-group > .btn, @@ -123,8 +141,13 @@ .input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn { @include border-left-radius(0); } -.form-control + .input-group-addon:not(:first-child) { - border-left: 0; + +.form-control, +.custom-select, +.custom-file { + + .input-group-addon:not(:first-child) { + border-left: 0; + } } // From 8f9e8569ae388ba90549da897f63a8688b328da8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 22 Oct 2017 14:04:46 -0700 Subject: [PATCH 2/3] add ids, add for attributes, and fix dupe ids --- docs/4.0/components/input-group.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/4.0/components/input-group.md b/docs/4.0/components/input-group.md index 251af2a01c..db8dc4b0ce 100644 --- a/docs/4.0/components/input-group.md +++ b/docs/4.0/components/input-group.md @@ -237,8 +237,8 @@ Input groups include support for custom selects and custom file inputs. Browser {% example html %}
- Options - @@ -247,20 +247,20 @@ Input groups include support for custom selects and custom file inputs. Browser
- - Options +
- @@ -269,7 +269,7 @@ Input groups include support for custom selects and custom file inputs. Browser
- @@ -285,16 +285,16 @@ Input groups include support for custom selects and custom file inputs. Browser {% example html %}
- Upload + Upload
Upload @@ -305,14 +305,14 @@ Input groups include support for custom selects and custom file inputs. Browser
From 2d0399e4ea940a91178635d08d201650101d76be Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 22 Oct 2017 19:39:32 -0700 Subject: [PATCH 3/3] clarify --- docs/4.0/components/input-group.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/4.0/components/input-group.md b/docs/4.0/components/input-group.md index db8dc4b0ce..011a1edc75 100644 --- a/docs/4.0/components/input-group.md +++ b/docs/4.0/components/input-group.md @@ -1,11 +1,13 @@ --- layout: docs title: Input group -description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs. +description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs. group: components toc: true --- + + ## Basic example Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple form-controls in a single input group** and `