From fb0ad7a93c658c21be88344a11fcafb403ed87c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= <ffoodd@users.noreply.github.com>
Date: Tue, 5 May 2020 19:43:16 +0200
Subject: [PATCH] Fix form file height (#30699)

---
 scss/forms/_form-file.scss                | 10 +++++-----
 site/content/docs/4.3/forms/validation.md |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/scss/forms/_form-file.scss b/scss/forms/_form-file.scss
index 947f77aca6..5bc4afc695 100644
--- a/scss/forms/_form-file.scss
+++ b/scss/forms/_form-file.scss
@@ -1,13 +1,13 @@
 .form-file {
+  --bs-form-file-height: #{$form-file-height};
   position: relative;
-  height: $form-file-height;
 }
 
 .form-file-input {
   position: relative;
   z-index: 2;
   width: 100%;
-  height: 100%;
+  height: var(--bs-form-file-height);
   margin: 0;
   opacity: 0;
 
@@ -32,7 +32,7 @@
   left: 0;
   z-index: 1;
   display: flex;
-  height: 100%;
+  height: var(--bs-form-file-height);
   border-color: $form-file-border-color;
   @include border-radius($form-file-border-radius);
   @include box-shadow($form-file-box-shadow);
@@ -71,7 +71,7 @@
 }
 
 .form-file-sm {
-  height: $form-file-height-sm;
+  --bs-form-file-height: #{$form-file-height-sm};
   @include font-size($form-file-font-size-sm);
 
   .form-file-text,
@@ -81,7 +81,7 @@
 }
 
 .form-file-lg {
-  height: $form-file-height-lg;
+  --bs-form-file-height: #{$form-file-height-lg};
   @include font-size($form-file-font-size-lg);
 
   .form-file-text,
diff --git a/site/content/docs/4.3/forms/validation.md b/site/content/docs/4.3/forms/validation.md
index 4613a6d743..2b8e1b7aa9 100644
--- a/site/content/docs/4.3/forms/validation.md
+++ b/site/content/docs/4.3/forms/validation.md
@@ -289,7 +289,7 @@ Validation styles are available for the following form controls and components:
     <div class="invalid-feedback">Example invalid select feedback</div>
   </div>
 
-  <div class="form-file">
+  <div class="form-file mb-3">
     <input type="file" class="form-file-input" id="validationFormFile" required>
     <label class="form-file-label" for="validationFormFile">
       <span class="form-file-text">Choose file...</span>