Skip to content

[TwigBridge] Fix HTML for translatable custom-file label in Bootstrap 4 theme #40980

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.

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
merged 1 commit into from
May 7, 2021

Conversation

acran
Copy link
Contributor

@acran acran commented Apr 28, 2021

Q A
Branch? 5.2
Bug fix? yes
New feature? no
Deprecations? no
Tickets
License MIT
Doc PR

Bootstrap allows to translate/change the label of the upload button of a custom-file input via SCSS, see Bootstrap docs:

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

This works by generating the following CSS which depends on the lang attribute of the input:

.custom-file-input:lang(es) ~ .custom-file-label::after {
	content: "Elegir";
}

This however currently does not work with the HTML generated by the theme since the resulting HTML is of the form (redacted here to the relevant parts):

<div class="custom-file">
  <input type="file" id="..." class="custom-file-input">
  <label for="..." lang="es" class="custom-file-label"></label>
</div>

while it should be of the form

<div class="custom-file">
  <input type="file" id="..." lang="es" class="custom-file-input">
  <label for="..." class="custom-file-label"></label>
</div>

i.e. the lang was placed on the label instead of the input.

This PR fixes this to be compatible with Bootstrap 4.

@carsonbot
Copy link

Hey!

To help keep things organized, we don't allow "Draft" pull requests. Could you please click the "ready for review" button or close this PR and open a new one when you are done?

Note that a pull request does not have to be "perfect" or "ready for merge" when you first open it. We just want it to be ready for a first review.

Cheers!

Carsonbot

… 4 theme

Bootstraps allows to translate the label of the button of a custom-file
input with SCSS variables depending on the lang attribute of the
*input*.
This attribute was set on the label instead and thus had no effect.
@nicolas-grekas
Copy link
Member

Thank you @acran.

@nicolas-grekas nicolas-grekas merged commit 38a991e into symfony:5.2 May 7, 2021
This was referenced May 9, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants