Remove explicit heights on form elements (#31993)

* Remove explicit heights

* Link to upstream bug

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/scss/_variables.scss b/scss/_variables.scss
index beb3e8c0caec46ded414d85f7e95d060bd8eec51..c98c500a2038cd109c1547a7d2c495e0381df155 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -737,7 +737,6 @@ $form-select-padding-y:             $input-padding-y !default;
 $form-select-padding-x:             $input-padding-x !default;
 $form-select-font-family:           $input-font-family !default;
 $form-select-font-size:             $input-font-size !default;
-$form-select-height:                $input-height !default;
 $form-select-indicator-padding:     1rem !default; // Extra padding to account for the presence of the background-image based indicator
 $form-select-font-weight:           $input-font-weight !default;
 $form-select-line-height:           $input-line-height !default;
@@ -767,12 +766,10 @@ $form-select-focus-box-shadow:    0 0 0 $form-select-focus-width $input-btn-focu
 $form-select-padding-y-sm:        $input-padding-y-sm !default;
 $form-select-padding-x-sm:        $input-padding-x-sm !default;
 $form-select-font-size-sm:        $input-font-size-sm !default;
-$form-select-height-sm:           $input-height-sm !default;
 
 $form-select-padding-y-lg:        $input-padding-y-lg !default;
 $form-select-padding-x-lg:        $input-padding-x-lg !default;
 $form-select-font-size-lg:        $input-font-size-lg !default;
-$form-select-height-lg:           $input-height-lg !default;
 
 $form-range-track-width:          100% !default;
 $form-range-track-height:         .5rem !default;

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 4f0f0a031e6340aebb2ca9e95f185fa925f05449..7b52c6cfef4ec15d1ee9c2899bf3cbe2818fbb0e 100644 (file)
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -5,7 +5,6 @@
 .form-control {
   display: block;
   width: 100%;
-  min-height: $input-height;
   padding: $input-padding-y $input-padding-x;
   font-family: $input-font-family;
   @include font-size($input-font-size);
@@ -45,6 +44,14 @@
     }
   }
 
+  // Add some height to date inputs on iOS
+  // https://github.com/twbs/bootstrap/issues/23307
+  // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
+  &::-webkit-date-and-time-value {
+    // Multiply line-height by 1em if it has no unit
+    height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+  }
+
   // Placeholder
   &::placeholder {
     color: $input-placeholder-color;
@@ -180,6 +187,24 @@
   }
 }
 
+// Make sure textareas don't shrink too much when resized
+// https://github.com/twbs/bootstrap/pull/29124
+// stylelint-disable selector-no-qualifying-type
+textarea {
+  &.form-control {
+    min-height: $input-height;
+  }
+
+  &.form-control-sm {
+    min-height: $input-height-sm;
+  }
+
+  &.form-control-lg {
+    min-height: $input-height-lg;
+  }
+}
+// stylelint-enable selector-no-qualifying-type
+
 .form-control-color {
   max-width: 3rem;
   padding: $input-padding-y;

diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index 5a684baa5cd07a70ae5c83d951a19d1f5646ab64..6ebe33e1028b2f6d6233177b81cc369fef99fc7f 100644 (file)
--- a/scss/forms/_form-select.scss
+++ b/scss/forms/_form-select.scss
@@ -6,7 +6,6 @@
 .form-select {
   display: block;
   width: 100%;
-  min-height: $form-select-height;
   padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $form-select-padding-y $form-select-padding-x;
   font-family: $form-select-font-family;
   @include font-size($form-select-font-size);
@@ -47,7 +46,6 @@
 
   &[multiple],
   &[size]:not([size="1"]) {
-    height: auto;
     padding-right: $form-select-padding-x;
     background-image: none;
   }
@@ -66,7 +64,6 @@
 }
 
 .form-select-sm {
-  height: $form-select-height-sm;
   padding-top: $form-select-padding-y-sm;
   padding-bottom: $form-select-padding-y-sm;
   padding-left: $form-select-padding-x-sm;
@@ -74,7 +71,6 @@
 }
 
 .form-select-lg {
-  height: $form-select-height-lg;
   padding-top: $form-select-padding-y-lg;
   padding-bottom: $form-select-padding-y-lg;
   padding-left: $form-select-padding-x-lg;

diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index 938a4185b354bb5ffa7f5d8b848d22d8e657ee95..2729eccbd506177a908ec46afcc82ea16cd420f4 100644 (file)
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -63,14 +63,6 @@
 // Remix the default form control sizing classes into new ones for easier
 // manipulation.
 
-.input-group-lg > .form-control {
-  min-height: $input-height-lg;
-}
-
-.input-group-lg > .form-select {
-  height: $input-height-lg;
-}
-
 .input-group-lg > .form-control,
 .input-group-lg > .form-select,
 .input-group-lg > .input-group-text,
@@ -80,14 +72,6 @@
   @include border-radius($input-border-radius-lg);
 }
 
-.input-group-sm > .form-control {
-  min-height: $input-height-sm;
-}
-
-.input-group-sm > .form-select {
-  height: $input-height-sm;
-}
-
 .input-group-sm > .form-control,
 .input-group-sm > .form-select,
 .input-group-sm > .input-group-text,