Skip to content

Change custom file markup #28696

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
XhmikosR merged 5 commits into from
Apr 30, 2019
Merged

Change custom file markup #28696

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4e5bd62
Change custom file markup
ysds Apr 26, 2019
43a1db3
Add truncated example of custom file browser
MartijnCuppens Apr 28, 2019
eecd96c
Merge branch 'master' into custom-file-markup
patrickhlauke Apr 29, 2019
c7e0b70
Merge branch 'master' into custom-file-markup
XhmikosR Apr 30, 2019
0b7f156
Merge branch 'master' into custom-file-markup
XhmikosR Apr 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 31 additions & 29 deletions scss/_custom-forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,16 +315,6 @@
&[disabled] ~ .custom-file-label {
background-color: $custom-file-disabled-bg;
}

@each $lang, $value in $custom-file-text {
&:lang(#{$lang}) ~ .custom-file-label::after {
content: $value;
}
}

~ .custom-file-label[data-browse]::after {
content: attr(data-browse);
}
}

.custom-file-label {
Expand All @@ -333,33 +323,43 @@
right: 0;
left: 0;
z-index: 1;
display: flex;
height: $custom-file-height;
border-color: $custom-file-border-color;
@include border-radius($custom-file-border-radius);
@include box-shadow($custom-file-box-shadow);
}

.custom-file-text {
display: block;
flex-grow: 1;
padding: $custom-file-padding-y $custom-file-padding-x;
overflow: hidden;
font-family: $custom-file-font-family;
font-weight: $custom-file-font-weight;
line-height: $custom-file-line-height;
color: $custom-file-color;
text-overflow: ellipsis;
white-space: nowrap;
background-color: $custom-file-bg;
border: $custom-file-border-width solid $custom-file-border-color;
@include border-radius($custom-file-border-radius);
@include box-shadow($custom-file-box-shadow);
border-color: inherit;
border-style: solid;
border-width: $custom-file-border-width;
@include border-left-radius(inherit);
}

&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 3;
display: block;
height: $custom-file-height-inner;
padding: $custom-file-padding-y $custom-file-padding-x;
line-height: $custom-file-line-height;
color: $custom-file-button-color;
content: "Browse";
@include gradient-bg($custom-file-button-bg);
border-left: inherit;
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
}
.custom-file-button {
display: block;
flex-shrink: 0;
padding: $custom-file-padding-y $custom-file-padding-x;
margin-left: -$custom-file-border-width;
line-height: $custom-file-line-height;
color: $custom-file-button-color;
@include gradient-bg($custom-file-button-bg);
border-color: inherit;
border-style: solid;
border-width: $custom-file-border-width;
@include border-right-radius(inherit);
}

// Range
Expand Down Expand Up @@ -507,6 +507,8 @@

.custom-control-label::before,
.custom-file-label,
.custom-file-text,
.custom-file-button,
.custom-select {
@include transition($custom-forms-transition);
}
4 changes: 0 additions & 4 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -622,7 +622,6 @@ $custom-range-thumb-active-bg: lighten($component-active-bg, 35%)
$custom-range-thumb-disabled-bg: $gray-500 !default;

$custom-file-height: $input-height !default;
$custom-file-height-inner: $input-height-inner !default;
$custom-file-focus-border-color: $input-focus-border-color !default;
$custom-file-focus-box-shadow: $input-focus-box-shadow !default;
$custom-file-disabled-bg: $input-disabled-bg !default;
Expand All @@ -640,9 +639,6 @@ $custom-file-border-radius: $input-border-radius !default;
$custom-file-box-shadow: $input-box-shadow !default;
$custom-file-button-color: $custom-file-color !default;
$custom-file-button-bg: $input-group-addon-bg !default;
$custom-file-text: (
en: "Browse"
) !default;


// Form validation
Expand Down
44 changes: 15 additions & 29 deletions site/content/docs/4.3/components/forms.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1011,7 +1011,10 @@ Validation styles are available for the following form controls and components:

<div class="custom-file">
<input type="file" class="custom-file-input" id="validatedCustomFile" required>
<label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
<label class="custom-file-label" for="validatedCustomFile">
<span class="custom-file-text">Choose file...</span>
<span class="custom-file-button">Browse</span>
</label>
<div class="invalid-feedback">Example invalid custom file feedback</div>
</div>
</form>
Expand Down Expand Up @@ -1293,41 +1296,24 @@ The file input is the most gnarly of the bunch and requires additional JavaScrip
{{< example >}}
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
<label class="custom-file-label" for="customFile">
<span class="custom-file-text">Choose file...</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.

#### Translating or customizing the strings with SCSS

The [`:lang()` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:lang) is used to allow for translation of the "Browse" text into other languages. Override or add entries to the `$custom-file-text` Sass variable with the relevant [language tag](https://en.wikipedia.org/wiki/IETF_language_tag) and localized strings. The English strings can be customized the same way. For example, here's how one might add a Spanish translation (Spanish's language code is `es`):

{{< highlight scss >}}
$custom-file-text: (
en: "Browse",
es: "Elegir"
);
{{< /highlight >}}

Here's `lang(es)` in action on the custom file input for a Spanish translation:
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="customFileLang" lang="es">
<label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
<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 >}}

You'll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using [the `lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) on the `<html>` element or the [`Content-Language` HTTP header](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12), among other methods.

#### Translating or customizing the strings with HTML

Bootstrap also provides a way to translate the "Browse" text in HTML with the `data-browse` attribute which can be added to the custom input label (example in Dutch):

{{< example >}}
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLangHTML">
<label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</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.
20 changes: 16 additions & 4 deletions site/content/docs/4.3/components/input-group.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,14 +322,20 @@ Input groups include support for custom selects and custom file inputs. Browser
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
<label class="custom-file-label" for="inputGroupFile01">
<span class="custom-file-text">Choose file...</span>
<span class="custom-file-button">Browse</span>
</label>
</div>
</div>

<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile02">
<label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose file</label>
<label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">
<span class="custom-file-text">Choose file...</span>
<span class="custom-file-button">Browse</span>
</label>
</div>
<div class="input-group-append">
<span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
Expand All @@ -342,14 +348,20 @@ Input groups include support for custom selects and custom file inputs. Browser
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
<label class="custom-file-label" for="inputGroupFile03">Choose file</label>
<label class="custom-file-label" for="inputGroupFile03">
<span class="custom-file-text">Choose file...</span>
<span class="custom-file-button">Browse</span>
</label>
</div>
</div>

<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
<label class="custom-file-label" for="inputGroupFile04">Choose file</label>
<label class="custom-file-label" for="inputGroupFile04">
<span class="custom-file-text">Choose file...</span>
<span class="custom-file-button">Browse</span>
</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
Expand Down