Fix form file height (#30699)

diff --git a/scss/forms/_form-file.scss b/scss/forms/_form-file.scss
index 947f77aca69a01c1b1c294ada3d4ab55a3fd9e15..5bc4afc69534e122c88a04dd77929add29150c49 100644 (file)
--- 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 4613a6d7433474d7862ff1a7dbaad1da2e678ef0..2b8e1b7aa93882479f9fe8ca1f158ed9b88a4e94 100644 (file)
--- 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>