Skip to content

Can't customize buttons location #151

@bastien70

Description

@bastien70

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="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/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 !

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions