使用 Bootstrap 在 Symfony 表单标签和小部件之间放置内容

Question

我希望能够在表单标签和表单小部件之间放置一两个小图标。

我想得到的是在上面的"Approach"字段中可以看到的内容，它是使用以下方法渲染的：

{{ form_row(formProjectDetail.approach) }}

但后来我修改了图像以向您展示我想要“？”的位置（实际上那里什么都没有；））。

我试图将标签与小部件分开

{{ 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) }}

您可以在 "Name" 字段中看到结果。好的，我明白了“？”在标签右侧但是：

1) 标签不再正确对齐

2) 小部件进入下一行，占据整个space

3) Name 小部件和下面的小部件之间的 space 减少为 0

4) 如果“？”与标签一致，没有略微偏上

有没有一种不涉及完全更改 Symfony 的 Bootstrap 表单模板的好方法？

实际上是“？”符号和另一个可能在其他字段中使用的符号应该是标签的一部分（从对齐的角度来看），这样 Approach 字段就不是我所需要的，我需要它稍微在左边，这样右边图像的一部分与下方标签的右侧部分对齐（"background"，这是唯一真正正确对齐的部分）。

谢谢！

编辑

如果我必须覆盖以下内容：

{# 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 %}

在里面 bootstrap_3_horizontal_layout.html.twig 我会很感激你的帮助 ;)

编辑 2

按照建议，我已经覆盖了代码的适当部分，即创建一个新模板：

{% 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 -%}

它确实可以通过 class（如果它是 "history" 显示时钟）和自定义 url，方法如下：

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

我只有两个问题：第一个比较小，现在我的表格被翻转了：

我确定我在这里遗漏了一些非常基本的东西。

另一个有点复杂。在某些情况下，我的字段不是普通字段，而是数组集合的最后一个元素。为了渲染它，我这样做：

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

请注意，我只指定了小部件，就好像我还渲染了标签，它渲染了最后一个数组集合元素的数组索引 [0,1,2...]。

如何将 myurl 参数指定为这些元素之一？

该元素将是公差，它有几个字段风险等...

编辑 3

通过直接呈现行而不是小部件解决了两个问题中最棘手的问题：

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

仍然需要弄清楚如何不翻转 ;)

Answer 1

您需要创建一个 form theme，您将在其中使用您需要的代码覆盖标签块，并保持其余部分不变：

{% 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 %}

与您的编辑不同的是我不使用 {{ parent() }}，否则它会像以前一样运行。我从我的 Symfony 2.3 供应商文件夹中复制代码，如果您使用 different\newer 版本，请从您的供应商文件夹中复制代码。

现在，您可以随心所欲地处理 label 代码。

之后，要使用主题，您需要在布局中使用以下代码（假设 form 是您视图中表单变量的名称）：

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

使用 Bootstrap 在 Symfony 表单标签和小部件之间放置内容

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

twitter-bootstrap

symfony

symfony-forms