3

我有一个带有多个国家/地区选择列表的表单生成器表单。当我像这样在我的表单上呈现它们时：

{{ 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 方法来完成这个？

谢谢。

4

3 回答 3

16

来自 Symfony 文档

您基本上需要做的是重载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 的问题）。

于 2011-12-20T10:21:27.607 回答
8

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

最简单的，渲染一个你可能会做的表单：

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

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

于 2012-07-18T08:38:28.540 回答
1

正如 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.

于 2011-12-20T22:27:12.457 回答