Make custom select and file inputs 100% wide

Matches browser default inputs and swaps some max-width properties for a regular width

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index e66638ba338a6197b7c7c4dc820864ae9777719a..56093bc4841266094d76c3b903ab79841d3ce4f6 100644 (file)
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -147,7 +147,7 @@
 
 .custom-select {
   display: inline-block;
-  max-width: 100%;
+  width: 100%;
   height: $input-height;
   padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
   line-height: $custom-select-line-height;
@@ -219,13 +219,12 @@
 .custom-file {
   position: relative;
   display: inline-block;
-  max-width: 100%;
+  width: 100%;
   height: $custom-file-height;
   margin-bottom: 0;
 }
 
 .custom-file-input {
-  min-width: $custom-file-width;
   max-width: 100%;
   height: $custom-file-height;
   margin: 0;

diff --git a/scss/_variables.scss b/scss/_variables.scss
index b51b99a3a113283c0ad5a4269cc1fff20f448ae4..8ebb619ccc4b4f645b9fc30915ac3ff22db18110 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -494,7 +494,6 @@ $custom-select-font-size-lg:        125% !default;
 $custom-select-height-lg:           $input-height-lg !default;
 
 $custom-file-height:                $input-height !default;
-$custom-file-width:                 14rem !default;
 $custom-file-focus-border-color:    $input-focus-border-color !default;
 $custom-file-focus-box-shadow:      $input-btn-focus-box-shadow !default;