diff options
| author | Martijn Cuppens <[email protected]> | 2019-04-28 17:47:51 +0200 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2019-04-30 10:45:05 +0300 |
| commit | f36890d1cd47ba1706a1d81fc7d2a5468e5dc3f3 (patch) | |
| tree | 00aaafdaff5274ccb68e3f51f23c72e367694445 | |
| parent | a454ea7cf7167957601b7f9bbac1da7728186d24 (diff) | |
| download | bootstrap-f36890d1cd47ba1706a1d81fc7d2a5468e5dc3f3.tar.xz bootstrap-f36890d1cd47ba1706a1d81fc7d2a5468e5dc3f3.zip | |
Add truncated example of custom file browser
| -rw-r--r-- | site/content/docs/4.3/components/forms.md | 13 |
1 files changed, 13 insertions, 0 deletions
diff --git a/site/content/docs/4.3/components/forms.md b/site/content/docs/4.3/components/forms.md index e48f5bc12..4214f1660 100644 --- a/site/content/docs/4.3/components/forms.md +++ b/site/content/docs/4.3/components/forms.md @@ -1303,4 +1303,17 @@ The file input is the most gnarly of the bunch and requires additional JavaScrip </div> {{< /example >}} + +Longer placeholder text is truncated and an ellipsis is added when there's not enough space. + +{{< example >}} +<div class="custom-file"> + <input type="file" class="custom-file-input" id="customFileLong"> + <label class="custom-file-label" for="customFileLong"> + <span class="custom-file-text">Lorem ipsum posuere consectetur est at lobortis nulla vitae elit libero a pharetra augue fusce dapibus tellus ac cursus commodo tortor mauris condimentum nibh ut fermentum massa justo sit amet risus cras mattis consectetur purus sit amet fermentum</span> + <span class="custom-file-button">Browse</span> + </label> +</div> +{{< /example >}} + We hide the default file `<input>` via `opacity` and instead style the `<label>`. The button is generated and positioned with `::after`. Lastly, we declare a `width` and `height` on the `<input>` for proper spacing for surrounding content. |