使用 Bootstrap 在 Symfony 表单标签和小部件之间放置东西 [英] 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) 标签不再正确对齐

1) the label is not properly aligned any longer

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

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

3) Name widget 和以下内容之间的空间减少到 0

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

4) 最好是?"与标签一致，不是稍微在上面

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

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

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

实际上是?"符号，以及可能在其他领域使用的另一个符号，应该是标签的一部分(从对齐的角度来看)，这样 Approach 字段就不是我所需要的，我需要它稍微靠左，以便右边图像的一部分与下方标签的右侧部分对齐(背景"，这是唯一真正正确对齐的部分).

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).

谢谢！

编辑

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

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

在 bootstrap_3_horizo​​ntal_layout.html.twig 里面，我很感激你的帮助 ;)

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

编辑 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 -%}

它确实可以通过执行以下操作来传递类(如果它是历史"显示时钟)和自定义 url:

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

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

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.

如何指定其中一个元素的 myurl 参数?

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

元素将是宽容，其中有几个领域风险等...

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

编辑 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 ;)

推荐答案

您需要创建一个 表单主题，您将在其中使用您需要的代码覆盖标签块，而其余部分保持不变:

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

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

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.

现在，您可以随意处理 label 代码.

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

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

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

这篇关于使用 Bootstrap 在 Symfony 表单标签和小部件之间放置东西的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！