Question

我有一个formbuilder表单，其中包含多个国家/地区列表。当我在我的表单上呈现它们时：

{{ form_widget(edit_form.countries) }}

它们看起来像这样：

<input type="checkbox" name="..." value="AD" /><label for="...">Andorra</label>
<input type="checkbox" name="..." value="AE" /><label for="...">United Arab Emirates</label>
<input type="checkbox" name="..." value="AF" /><label for="...">Afghanistan</label>

我希望每个选项都显示在浏览器中自己的行上，而不是连续显示。如何在选项周围或之间注入html？或者有一种CSS方法来实现这个目标吗？

感谢。

Answer 1

来自Symfony Docs

您基本上需要做的是重载 checkbox_widget 阻止。

{% form_theme form _self %}

{% block checkbox_widget %}
{% spaceless %}
    <input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
{% endspaceless %}
{% endblock checkbox_widget %}

当然，您可以使用CSS将您的小部件放在自己的行中（但这不是Symfony2的问题）。

Answer 2

我发现这样做的一种更懒惰的方法是遍历表单/选择数组。

最简单的方法是渲染表格：

{{ form_widget(form) }}

要获得更多粒度，您可以这样做：

{{ form_row(form.itemA) }}
{{ form_row(form.itemB) }}
{{ form_row(form.itemC) }}

但是如果“itemA”是一个多选项，那么你就会被整个列表放在同一行上。如果您在升级主题之前寻找更多的粒度，可以这样做：

{% for t in form.itemA %}
{{ form_row(t) }}
{% endfor %}

这会将每个复选框呈现在自己的行上，或者让您有机会在每个项目之间做任何你想做的事。

Answer 3

正如Kuba在他的回答中所说，这听起来有点像CSS问题。从语义上讲，注入像<br />标签这样的东西并没有多大意义，但如果您希望通过遵循Kuba答案中的文档，您可以这样做。

如果你想编写一些CSS来逐行显示这些元素，你可以使用它来对抗symfony的默认输出：

input, label {
    float: left;
}

input {
    clear: left;
}

当然这实际上会导致所有输入和标签标签向左浮动，这可能不适合您，因此您可以 a）将复选框包装在另一个div中并使用css子选择器之类的.checkboxes input, .checkboxes label或 b）使用以下命令将自定义css类应用于您的小部件：

{{ form_widget(form.name, { 'attr': {'class': 'foo'} }) }}

并且CSS会相同，但不是input，而是.foo。

Symfony2如何渲染Checkboxes？

3 个答案: