CODEWITHSUNDEEP
phptwitter-bootstrapformssymfonytwig
0xPunt
0xPunt

Reputation: 321

Customize collection using bootstrap

I have a collection of an embedded form.

I'd like to customize the embedded form.

I want that each entry of the embedded form to be in 1 line, something like that :

    <div class="row">
        <div class="col-sm-6">field1</div>
        <div class="col-sm-6">field2</div>
    </div>

But symfony's doc is, in my opinion, poor for this.

I have a form ApplicationType :

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('responsables', 'collection', array(
            'label' => ' ',
            'type' => new ApplicationResponsablesType(),
            'allow_add' => true,
            'allow_delete' => true,
            'by_reference' =>false
        ))
        //...

And ApplicationResponsablesType :

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('type', null, array(
            'required' => true,
        ))
        ->add('id')
    ;

I really don't understand how to use {% block ___ %}.

my Application new.html.twig where I have the form :

{% block body -%}
<div class="container">
    <br>

    {{ form_start(form) }}
         {# some other fields #}
         {{ form_row(form.responsables) }}
         {# some other fields #}

         <div class="pull-right">
            {{ form_row(form.submit) }}
         </div>
    {{ form_end(form) }}

{# ... closing block and tags... #}

I tried some things but since I didn't understand how it works and what I actually tried, I'll not put it...

Can anyone help me or lead me ? Thanks!

Edit :

As you can see on this image :

enter image description here

On the top there is the first part of Application's form. And if the user add a lot of Responsable, this is huge. So I'd like to have Type and Uid on the same line.

(Here I'm talking only for responsable, but there is other collection on this form so that's why I'd like to simplify it)

Upvotes: 4

Views: 494

Answers (2)

Satheesh Kumar
Satheesh Kumar

Reputation: 2293

To bring those content in Inline, and as discussed in chat.

Here is one of the solution by using pure CSS.

Image reference for your required output:

enter image description here

As you have given the code in https://codeshare.io/GbQPkA , we can achieve the output by CSS.

Just add the below given CSS in your stylesheet, It may works fine.

CSS

div[id*="mybundle_application_responsables_"]{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
div[id*="mybundle_application_responsables_"] > .form-group {
    flex-grow: 1;
    width: 100%;
    padding: 10px;
}

Hope this may help you.If you prefer I will share the code in snippet with the updated CSS for demo.

Thanks.

Upvotes: 2

Roubi
Roubi

Reputation: 2106

Yes, Symfony doc is not very clear regarding this point. To achieve what you want:

  • Create a file prototype_layout.html.twig:

    {% block _application_responsables_entry_row %}
    <div class="row">
        <div class="col-sm-6">{{ form_row(form.type) }}</div>
        <div class="col-sm-6">{{ form_row(form.id) }}</div>
    </div>
{% endblock %}

The name of the block is important. The first part is _application because your parent form is called ApplicationType and the second part _responsables because your form field owning the collection is called so. The third part must always be _entry_row in order for this to work.

To make sure you got the first and second part of the name right, take a look in the DOM at the id of the select html element corresponding to your collection using the inspector tool of your browser.

  • Declare this file as a global form theme in the twig section of config.yml:

    twig:
    form_themes:
        - 'AppBundle:Form:prototype_layout.html.twig' #adapt this path if you saved your file elsewhere

  • You can also use the file directly in your form view (in your case new.html.twig):

{% use "AppBundle:Form:prototype_layout.html.twig" %}

Upvotes: 4

Related Questions