diff options
| author | Gaël Poupard <[email protected]> | 2020-05-05 19:43:16 +0200 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-05-05 19:43:16 +0200 |
| commit | fb0ad7a93c658c21be88344a11fcafb403ed87c6 (patch) | |
| tree | 63c776c7f3652cd2f2139849b3962505b6a4113f | |
| parent | 6f7c8d3caf5afdf85cdc8e9f14d4f7cdfdb1e209 (diff) | |
| download | bootstrap-fb0ad7a93c658c21be88344a11fcafb403ed87c6.tar.xz bootstrap-fb0ad7a93c658c21be88344a11fcafb403ed87c6.zip | |
Fix form file height (#30699)
| -rw-r--r-- | scss/forms/_form-file.scss | 10 | ||||
| -rw-r--r-- | 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 947f77aca..5bc4afc69 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 4613a6d74..2b8e1b7aa 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> |