This repository has been archived on 2023-08-20. You can view files and clone it, but cannot push or open issues or pull requests.
Go to file
Fabien Potencier 25df3e32cb bug #27919 [Form] Improve rendering of file field in bootstrap 4 (apfelbox)
This PR was squashed before being merged into the 4.1 branch (closes #27919).

Discussion
----------

[Form] Improve rendering of `file` field in bootstrap 4

| Q             | A
| ------------- | ---
| Branch?       | 4.1+
| Bug fix?      | yes
| New feature?  | no
| BC breaks?    | no
| Deprecations? | no
| Tests pass?   | yes
| Fixed tickets | —
| License       | MIT
| Doc PR        | —

Hi 👋

currently adding a file type to a form looks weird in the bootstrap 4 form themes:

```php
$builder
    ->add("pdfFile", FileType::class, [
        "label" => "PDF",
    ]);
```

## Before

### Vertical Form

![2018-07-10 at 21 36](https://user-images.githubusercontent.com/1032411/42533175-6b88e33a-8489-11e8-927a-8e987f362913.png)

### Horizontal Form

![2018-07-10 at 21 37](https://user-images.githubusercontent.com/1032411/42533197-7d45944c-8489-11e8-970f-79b18a273366.png)

## After

### Vertical Form

![2018-07-10 at 21 38](https://user-images.githubusercontent.com/1032411/42533229-8ebe44a8-8489-11e8-94e0-891403063476.png)

### Horizontal Form

![2018-07-10 at 21 38](https://user-images.githubusercontent.com/1032411/42533247-99782db4-8489-11e8-9f66-30a5dccdaa9d.png)

## Things to consider

There are three labels here:

![2018-07-10 at 21 40](https://user-images.githubusercontent.com/1032411/42533370-ecbaf63c-8489-11e8-9be8-1c8c3342c459.png)

1) the actual field label. Here the `$options["label"]` is used.
2) the placeholder. Here `$options["attr"]["placeholder"] ?? ""` is used **new**
3) the label on the button. This is set in CSS actually, on an `::after` attribute.

There isn't much we can do about 3) because there is no inline HTML-way to overwrite the style of a pseudo element. So if the app developer wants to have localization in this field as well, (s)he has to set it in their CSS file [as described in the bootstrap docs](https://getbootstrap.com/docs/4.0/components/forms/#file-browser)

## Todo

- [x] ~~WIP because I haven't managed to get the test suite to run locally yet, so we will debug with Travis 🙌~~  okay, getting them to work is really, really easy, but you just have to get over yourself and do it 🙄

Commits
-------

32ad5d9f9c [Form] Improve rendering of `file` field in bootstrap 4
2018-07-15 09:26:40 +02:00
.composer Drop hirak/prestissimo 2016-05-12 07:44:15 -05:00
.github add @xabbuh as a code owner of the Yaml component 2018-07-09 10:01:26 +02:00
src/Symfony bug #27919 [Form] Improve rendering of file field in bootstrap 4 (apfelbox) 2018-07-15 09:26:40 +02:00
.editorconfig Add EditorConfig File 2012-06-16 14:08:15 +02:00
.gitignore Add appveyor.yml for C.I. on Windows 2015-08-25 23:41:37 +02:00
.php_cs.dist [DI] Service decoration: autowire the inner service 2018-03-20 19:23:30 +01:00
.travis.yml Merge branch '4.0' into 4.1 2018-06-27 23:05:46 +02:00
appveyor.yml Merge branch '3.4' into 4.0 2018-04-26 18:12:06 +02:00
CHANGELOG-4.0.md updated CHANGELOG for 4.0.12 2018-06-25 15:02:02 +02:00
CHANGELOG-4.1.md updated CHANGELOG for 4.1.1 2018-06-25 15:06:25 +02:00
composer.json Merge branch '4.0' into 4.1 2018-07-03 19:58:50 +02:00
CONTRIBUTING.md Mention the community review guide 2016-12-18 22:02:35 +01:00
CONTRIBUTORS.md update CONTRIBUTORS for 2.8.42 2018-06-25 14:01:37 +02:00
LICENSE fixed years in copyright 2018-01-03 08:23:28 +01:00
link [DI] Minor performance tweak in PriorityTaggedServiceTrait 2018-05-03 17:03:52 -07:00
phpunit Default testsuite to latest PHPUnit 6.* 2018-05-25 15:04:04 +02:00
phpunit.xml.dist [Cache] Rely on mock for Doctrine ArrayCache 2018-03-19 23:12:11 +01:00
README.md Merge branch '2.8' into 3.4 2018-05-25 16:50:57 +02:00
UPGRADE-4.0.md Merge branch '2.8' into 3.4 2018-05-31 12:13:22 +02:00
UPGRADE-4.1.md Merge branch '4.0' into 4.1 2018-05-31 12:17:53 +02:00
UPGRADE-5.0.md [Workflow] "clear()" instead of "reset()" 2018-04-29 09:31:06 -07:00

Symfony is a PHP framework for web applications and a set of reusable PHP components. Symfony is used by thousands of web applications (including BlaBlaCar.com and Spotify.com) and most of the popular PHP projects (including Drupal and Magento).

Installation

Documentation

Community

Contributing

Symfony is an Open Source, community-driven project with thousands of contributors. Join them contributing code or contributing documentation.

Security Issues

If you discover a security vulnerability within Symfony, please follow our disclosure procedure.

About Us

Symfony development is sponsored by SensioLabs, led by the Symfony Core Team and supported by Symfony contributors.