ninsuo / symfony-collection

[NOT MAINTAINED] A jQuery plugin that manages adding, deleting and moving elements from a Symfony form collection
https://symfony-collection.fuz.org/
MIT License
444 stars 88 forks source link

Can't customize buttons location #151

Open bastien70 opened 5 years ago

bastien70 commented 5 years ago

Hello, I'm trying to place my buttons on the same row that my fields, like this

collection1

But for the moment, I have :

collection2

And I can't put my buttons on the same row that my fields

This is my files :

GroupeValidateursType.php :

`public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('validateurs', CollectionType::class, [
                'entry_type' => ValidateurType::class,
                'entry_options' => [
                    'label' => false,
                ],
                'allow_add' => true,
                'allow_delete' => true,
                'delete_empty' => true,
                'by_reference' => true,
                'prototype' => true,
                'label' => false,
                'attr' => array(
                    'class' => 'my-selector',
                    'label' => false,
                ),
            ]);

        $builder->add('save', SubmitType::class, [
            'label' => 'Enregistrer',
            'attr' => [
                'class' => 'btn btn-primary'
            ]
        ]);
    }`

And my twig

`{% extends "base.html.twig" %}
{% block stylesheets %}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet"/>
{% endblock %}

{% form_theme form 
    'partials/jqueryCollection/jquery.collection.html.twig'
     %}

{% block body %}
    <div class="validateurs">
        {{form_start(form)}}
        <div class="row">
            <div class="col-md-3">
                {{form_widget(form.validateurs, {'attr': {'class': 'my-selector'} })}}
            </div>

        </div>
        {{form_end(form)}}
    </div>

{% endblock %}

{% block javascripts %}
    <script src="/js/jquery.collection.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>

    <script type="text/javascript">
        $('.my-selector').collection({
            up: '<a href="#" class="btn btn-default ml-2" title="Remonter"><span><i class="fas fa-arrow-up fa-lg"></i></span></a>',
            down: '<a href="#" class="btn btn-default ml-2" title="Redescendre"><span><i class="fas fa-arrow-down fa-lg"></span></a>',
            add: '<a href="#" class="btn btn-default ml-2" title="Ajouter"><span><i class="fas fa-plus-circle fa-lg"></i></span></a>',
            remove: '<a href="#" class="btn btn-default ml-2" title="Supprimer"><span><i class="fas fa-trash-alt fa-lg"></i></span></a>',
            position_field_selector: '.my-position',
            add_at_the_end: true
        });
    </script>

{% endblock %}
`

Thanks for your help !