From 560fd16178123acaa2fe9ce136dec52954cd61d1 Mon Sep 17 00:00:00 2001 From: Gerry Kaplan Date: Sun, 23 Jul 2017 11:16:22 -0400 Subject: [PATCH] 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 887ff3267..7a9338fbe 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 000000000..883c4672d --- /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 000000000..7242f3f43 --- /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.

+
+
+
+ $ + +
+ +
+
+
+
+
+ + + + + + -- 2.47.2