From 560fd16178123acaa2fe9ce136dec52954cd61d1 Mon Sep 17 00:00:00 2001 From: Gerry Kaplan Date: Sun, 23 Jul 2017 11:16:22 -0400 Subject: [PATCH 1/3] Issue 10416 - input-group buttons not sized properly Adjusted height for flex mode to fill parent container. Added two tests - one for flex/xygrid and the other for flow mode. --- scss/forms/_input-group.scss | 11 +++++-- test/visual/form/input-group-flow.html | 35 +++++++++++++++++++++ test/visual/form/input-group-xygrid.html | 40 ++++++++++++++++++++++++ 3 files changed, 84 insertions(+), 2 deletions(-) create mode 100644 test/visual/form/input-group-flow.html create mode 100644 test/visual/form/input-group-xygrid.html diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss index 887ff32671..7a9338fbe6 100644 --- a/scss/forms/_input-group.scss +++ b/scss/forms/_input-group.scss @@ -107,6 +107,7 @@ $input-prefix-padding: 1rem !default; @if $global-flexbox { flex: 0 0 auto; + display: flex; } @else { width: 1%; @@ -118,10 +119,16 @@ $input-prefix-padding: 1rem !default; button, label { @extend %input-group-child; - height: $height; + + @if $global-flexbox { + height: auto; + align-self: stretch; + } + @else { + height: $height; + } padding-top: 0; padding-bottom: 0; - font-size: $input-font-size; } } diff --git a/test/visual/form/input-group-flow.html b/test/visual/form/input-group-flow.html new file mode 100644 index 0000000000..883c4672d3 --- /dev/null +++ b/test/visual/form/input-group-flow.html @@ -0,0 +1,35 @@ + + + + + + + + Foundation for Sites Testing + + + + + +
+

FLOW Control Group: input-group height & vertical alignment.

+

Assure that all controls are flush at the top and bottom. Pay special + attention to the Submit button.

+
+
+
+ $ + +
+ +
+
+
+ + + + + + diff --git a/test/visual/form/input-group-xygrid.html b/test/visual/form/input-group-xygrid.html new file mode 100644 index 0000000000..7242f3f434 --- /dev/null +++ b/test/visual/form/input-group-xygrid.html @@ -0,0 +1,40 @@ + + + + + + + + Foundation for Sites Testing + + + + + + +
+
+
+

XY Grid-Control Group: input-group height & vertical alignment.

+

Assure that all controls are flush at the top and bottom. Pay special + attention to the Submit button.

+
+
+
+ $ + +
+ +
+
+
+
+
+ + + + + + From 2a9e0c21bb743d869de8874008aa274839b43419 Mon Sep 17 00:00:00 2001 From: Gerry Kaplan Date: Sun, 23 Jul 2017 15:44:15 -0400 Subject: [PATCH 2/3] Renaming test from input-group-flow to input-group-float --- .../form/{input-group-flow.html => input-group-float.html} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename test/visual/form/{input-group-flow.html => input-group-float.html} (93%) diff --git a/test/visual/form/input-group-flow.html b/test/visual/form/input-group-float.html similarity index 93% rename from test/visual/form/input-group-flow.html rename to test/visual/form/input-group-float.html index 883c4672d3..293f9c522b 100644 --- a/test/visual/form/input-group-flow.html +++ b/test/visual/form/input-group-float.html @@ -12,7 +12,7 @@
-

FLOW Control Group: input-group height & vertical alignment.

+

FLOAT Control Group: input-group height & vertical alignment.

Assure that all controls are flush at the top and bottom. Pay special attention to the Submit button.

From a60095375c023c63ab0ed1f36e6a93bd850b782c Mon Sep 17 00:00:00 2001 From: Vincent Date: Fri, 4 Aug 2017 10:41:50 +0200 Subject: [PATCH 3/3] Re-order CSS properties As suggested by @IamManchanda: https://github.com/zurb/foundation-sites/pull/10456#discussion_r128928162 --- scss/forms/_input-group.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss index 7a9338fbe6..e26618a879 100644 --- a/scss/forms/_input-group.scss +++ b/scss/forms/_input-group.scss @@ -106,8 +106,8 @@ $input-prefix-padding: 1rem !default; text-align: center; @if $global-flexbox { - flex: 0 0 auto; display: flex; + flex: 0 0 auto; } @else { width: 1%;