Symfony / a2lix_translations / customize

Question

can someone help me. How can I modify default template to bootstrap version? Because input's doesn't have a class "form-control".

Here is defaul:

{% block a2lix_translations_widget %}
    {{ form_errors(form) }}
    <div class="a2lix_translations tabbable">
        <ul class="a2lix_translationsLocales nav nav-tabs">
        {% for translationsFields in form %}
            {% set locale = translationsFields.vars.name %}

            <li {% if app.request.locale == locale %}class="active"{% endif %}>
                <a href="#" data-toggle="tab" data-target=".{{ translationsFields.vars.id }}_a2lix_translationsFields-{{ locale }}">
                    {{ locale|capitalize }}
                    {% if form.vars.default_locale == locale %}[Default]{% endif %}
                    {% if translationsFields.vars.required %}*{% endif %}
                </a>
            </li>
        {% endfor %}
        </ul>

        <div class="a2lix_translationsFields tab-content">
        {% for translationsFields in form %}
            {% set locale = translationsFields.vars.name %}

            <div class="{{ translationsFields.vars.id }}_a2lix_translationsFields-{{ locale }} tab-pane {% if app.request.locale == locale %}active{% endif %} {% if not form.vars.valid %}sonata-ba-field-error{% endif %}">
                {{ form_errors(translationsFields) }}
                {{ form_widget(translationsFields) }}
            </div>
        {% endfor %}
        </div>
    </div>
{% endblock %}

{% block a2lix_translationsForms_widget %}
    {{ block('a2lix_translations_widget') }}
{% endblock %}

I have no idea what should I insert/delete/modify :( Thanks

Answer 1

I have done a custom form template for a2lix_translations with bootstrap(full code is too long and not optimal to paste here) But to get the classes I need like form-control into the widgets I have done the following:

         {%for field in translationsFields%} {# further break the transliationsfields into individual inputs #}
      {%if  field.vars.attr is not empty and field.vars.attr['class'] is defined and field.vars.attr['class']=="tinymce"%}
                                    {{form_widget(field ,{'attr':{'class':' tinymcertl'}}   )}}
                                {%else%}
                                    {{form_widget(field,{'attr':{'style':'direction:rtl','class':class~' form-control'}} )}}
                                {%endif%} 
{%endfor%}

The ugly code above is basically saying, if the widget already has a class, add the class form-group to it. If the widget does not have a class at all, set the class to be form-group. I have done that if statement to avoid null pointers since if I try to reference the form class and there isn't one, the code will crash. And if I just do set class to form-group, it will erase the previous classes.

I hope this helps. My full code might not be helpful to you because the languages I was working with involved left to right language and right to left languages, so a lot of conditions had to be implemented to orient my page in the right direction, which is messy and you might not need...

PS: this was done on symfony 2.7 or so. Did not test on symfony 3.

Answer 2

in my case sf 3.2 i just did this change in my config.yml and all forms are bootstraped :

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