使用Bootstrap

Question

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

我想得到的是在上面的“方法”字段中可以看到的内容，即渲染使用：

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

您可以在“名称”字段中看到结果。好的，我得到了“？”在标签的右边但是：

1）标签不再正确对齐

2）小部件进入下一行，占据整个空间

3）Name小部件和以下内容之间的空间减少到0

4）如果“？”会更好符合标签，而不是顶部

有没有一种很好的方法可以做到这一点，这不涉及完全改变Symfony的Bootstrap表单模板？

其实“？”符号，以及可能在其他字段中使用的另一个符号，应该是标签的一部分（从对角线的角度来看），因此“接近”字段不是我需要的，我需要它稍微在左边，以便右边图像的一部分与下面标签的右侧部分对齐（“背景”，这是唯一一个真正正确对齐的部分）。

谢谢！

修改

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

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

确实可以通过以下方式传递类（如果它的“历史记录”显示时钟）和自定义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供应商文件夹中的代码，如果您使用的是其他\更新的版本，请将其复制。

现在，您可以根据需要使用label代码。

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

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