Render that Form Pretty (Bootstrap)

Hi Nina!

That is actually what we discuss in this chapter! :) https://knpuniversity.com/s...

By following this, the form will render with bootstrap-friendly classes. We added the Bootstrap CSS back in the first episode of this series: https://knpuniversity.com/s...

I hope that helps! Cheers!

Hey Osshe

Does only the textbox stays the same but other fields changed ?
Could you show me how your config.yml and form html looks like ?

Have a nice day!

Form html

{% block body %}

<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>New Genus</h1>

{{form_start(genusForm)}}
{{form_widget(genusForm)}}

<button type="submit" class="btn btn-primary">Save</button>

{{form_end(genusForm)}}

</div>
</div>
</div>
{% endblock %}

config yml (only twig part)

# Twig Configuration
twig:
debug: "%kernel.debug%"
strict_variables: "%kernel.debug%"
number_format:
thousands_separator: ','
form_themes:
- bootstrap_3_layout.html.twig'

Hmm, everything looks good, but looks like you have an extra ' (single quote) after bootstrap_3_layout.html.twig
try removing it

form_themes: 
- bootstrap_3_layout.html.twig

Cheers!

I figure it out yesterday, i was running the code on "prod"

Thanks for the help anyway

I'm glad to hear you could fix it
One more thing, if you are working in prod environment, don't forget to clear your cache :)

Have a nice day!

Hey Jian,

If you don't need Bootstrap styles - do not import it at all, I mean do not add this line:

# app/config/config.yml
twig:
    form_themes:
        - bootstrap_3_layout.html.twig

Instead, create a new CSS file with your custom styles in the web/ directory and then link it in your base Twig template with the "link" tag.

Cheers!

Got it! :)

Hey Ahmad,

Actually, when you commented out `form_widget(login_form)`, all fields will be rendered with `form_end(login_form)`. Before rendering the close form tag, Symfony will render all remaining fields, which have not been rendered yet. So it works without `form_widget(login_form)` just fine, but it could confusing other developers when they see an empty form.

And by the way, `form_widget(login_form)` do a bit more extra works - it renders all the form fields, which includes the field element itself, a label and any validation error messages for the field. But if you render a separate field with `form_widget` like `{{ form_widget(login_form._username) }}`, it'll render only HTML representation of a field without label and errors, so you should use `form_label` and `form_errors` too, or simply use `form_row` instead of `form_widget`.

Cheers!

Hey Dan_M

It's great that you are working on something real while watching our tutorials :)
Can you tell if you are using Symfony Standard Edition ? because it should have bootstrap layout's builted-in
Now, if you what you mean is bootstrap itself, you have to include it into your base template, so every template can make use of it, there are several ways to include it into your project, give a look here http://getbootstrap.com/get...

I hope it helps you :) cheers!

Thanks! That helped a lot.

As it turns out, I was really close. The getbootstrap.com link got me over the finish line on this problem.

Hey Mehdi

Just to clarify why is a good practice to render submit buttons by hand is because you can reuse your forms in other places

Your second button (for uploading files), how are you managing? I mean, when you click it, what happens, does it adds a new file input to the form?

Cheers!

Thanks,
No the file input is already in the form. This is the behavior that I expect: when I select a file and click the upload button, the file is uploaded without receiving validation errors regarding other fields in the form.

Oh, I got you know! In that case, I think you have to separate it into another form, so you can create an endpoint for each action, and handle them independently.

Hey Hermen!

Well first, congrats on your first app! A course about translations, etc is on our list, but let me see if I can help you out a bit now. Translations, or "internationalization" is broken down into 3 separate pieces:

A) Translating the static strings (like headers and form labels). This is pretty easy, it involves doing things like {{ 'welcome'|trans }} in your Twig files (or slightly different code if you need to translate something in your controller). Then, you need to create a messages.en.yml file and other files for other languages message.de.yml. You don't need to use the en_US long format, unless you need to have 2 translations for the same language, but for different countries (e.g. British vs UK English).

B) Translating your data inside Doctrine is an entirely different task (and you should make sure you need this - it's a lot of extra maintenance to need to translate everything you put into the database). For this, https://symfony.com/doc/current/bundles/StofDoctrineExtensionsBundle/index.html and then following along with the docs in the Gedmo library it integrates: https://github.com/Atlantic18/DoctrineExtensions/blob/v2.4.x/doc/translatable.md. I've never had to do this before, I'm sure there are some pitfalls and possibly some gaps in the docs!

C) Formatting dates and currencies is the third and final piece. If I remember correctly, I don't think that Symfony gives you much here, because PHP has all of this functionality (Symfony forms do have a few spots where they need to handle this for you, but they use the underlying PHP functions behind the scenes). For example, for the thousands separator, you'll use http://php.net/manual/en/function.number-format.php or http://php.net/manual/en/class.numberformatter.php. For dates, I think you'll use this (I'm not an expert on this stuff!) http://us3.php.net/manual/en/function.strftime.php. These functions honestly have always been a bit tricky for me to understand, but they are the right way to handle this.

Anyways, I hope that at least gets you going!

Cheers!