Placing stuff between a Symfony Form label and the widget using Bootstrap

问题

I want to be able to place one or two small icons between the label of a form and the form widget.

What I'd like to get is what can be seen in the "Approach" field above, which is rendere using:

{{ form_row(formProjectDetail.approach) }}

But then I modified the image to show you where I want the "?" (in reality there is nothing there ;) ).

I tried to separate the label from the widget doing

{{ form_label(formProjectDetail.name) }}
<a data-toggle="modal" href="#modalHelpProjectDetailName"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a>
{{ form_widget(formProjectDetail.name) }}

and you can see the result in the "Name" field. Ok, I get the "?" on the right of the label but:

1) the label is not properly aligned any longer

2) the widget goes into the following row, occupying the whole space

3) the space between Name widget and the following gets reduced to 0

4) it would be preferrable if the "?" was in line with the label, not slightly on top

Is there a nice way to do that, which doesn't involve changing completely the Bootstrap form template for Symfony?

Actually the "?" symbol, and another symbol which might be used in other fields, should be part of the label (from the aligment perspective) so that the Approach field is not exactly what I need, I need it to be slightly on the left so that the right part of the image is aligned with the right part of the label underneath ("background", which is the only one really properly aligned).

Thank you!

EDIT

If I have to override the following:

{# Labels #}

{% block form_label -%}
{% spaceless %}
    {% if label is sameas(false) %}
        <div class="{{ block('form_label_class') }}"></div>
    {% else %}
        {% set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ' ~ block('form_label_class'))|trim}) %}
        {{- parent() -}}
    {% endif %}
{% endspaceless %}
{%- endblock form_label %}

which is inside bootstrap_3_horizontal_layout.html.twig I would appreciate a helping hand ;)

EDIT 2

As suggested I have overridden the appropriate portion of code, namely creating a new template:

{% extends "bootstrap_3_horizontal_layout.html.twig"%}

{%- block form_label -%}
    {% if label is not sameas(false) -%}
        {% if not compound -%}
            {% set label_attr = label_attr|merge({'for': id}) %}
        {%- endif %}
        {% if required -%}
            {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' required')|trim}) %}
        {%- endif %}
        {% if label is empty -%}
            {%- if label_format is not empty -%}
                {% set label = label_format|replace({
                    '%name%': name,
                    '%id%': id,
                }) %}
            {%- else -%}
                {% set label = name|humanize %}
            {%- endif -%}
        {%- endif -%}
        <label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>{{ label|trans({}, translation_domain) }}
        {% if 'history' in label_attr.class %}
            <a data-toggle="modal" href="#{{myurl}}"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></a>
        {% endif %}
        </label>
    {%- endif -%}
{%- endblock form_label -%}

And it indeed work passing both the class (if it's "history" displays the clock) and the custom url by doing something like:

{{ form_row(form.type, {'label_attr': {'class': 'history'}, 'myurl':'this_is_my_url'}) }}

I just have two issues: the first one is relatively minor, now my form is flipped:

I'm sure I'm missing something very basic here.

The other is a bit more complicated. In some cases my field is not a normal field but the last element of an array collection. To render it I do:

{{ form_widget(form.scopesHistory|last) }}

Note that I'm specifying just the widget, as if I also render the label it renders the array index [0,1,2...] of the array collection element that is the last one.

How can I specify the myurl parameter to of one of those elements?

The element would be tolerance, which has several fields risk etc...

EDIT 3

Solved the toughest of the two issues by rendering directly the row instead of the widget:

{{ form_row((formProjectDetail.scopesHistory|last).scope, {'label_attr': {'class': 'history'}, 'myurl':'#modalHistoryProjectDetailScope'}) }}

Still have to figure out how not having it flipped ;)

回答1:

You need to create a form theme, where you'll override the label block with the code for that you need, and leave all the rest untouched:

{% block form_label -%}
{% spaceless %}
    {% if label is sameas(false) %}
        <div class="{{ block('form_label_class') }}"></div>
    {% else %}
        {% set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ' ~ block('form_label_class'))|trim}) %}
        <label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>{{ label|trans({}, translation_domain) }} </label>
    {% endif %}
{% endspaceless %}
{%- endblock form_label %}

The difference from your edit is that I don't use {{ parent() }}, or it'll behave just like before. I copied the code from my Symfony 2.3 vendor folder, copy that from yours if you use a different\newer version.

Now, you have the label code to mess with, as you prefer.

After that, to use the theme, you need this code in your layout (assuming that form is the name of your form's variable in your view):

{% form_theme form 'form/fields.html.twig' %} 

来源：https://stackoverflow.com/questions/30195932/placing-stuff-between-a-symfony-form-label-and-the-widget-using-bootstrap