Question

我有一个嵌入式表单的集合。

我想自定义嵌入表单。

我希望嵌入表单的每个条目都在一行中，类似于：

    <div class="row">
        <div class="col-sm-6">field1</div>
        <div class="col-sm-6">field2</div>
    </div>

但在我看来，symfony的doc对此很不利。

我有一个表单ApplicationType：

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('responsables', 'collection', array(
            'label' => ' ',
            'type' => new ApplicationResponsablesType(),
            'allow_add' => true,
            'allow_delete' => true,
            'by_reference' =>false
        ))
        //...

ApplicationResponsablesType：

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('type', null, array(
            'required' => true,
        ))
        ->add('id')
    ;

我真的不明白如何使用{% block ___ %}。

我的申请new.html.twig我的表格是：

{% block body -%}
<div class="container">
    <br>

    {{ form_start(form) }}
         {# some other fields #}
         {{ form_row(form.responsables) }}
         {# some other fields #}

         <div class="pull-right">
            {{ form_row(form.submit) }}
         </div>
    {{ form_end(form) }}

{# ... closing block and tags... #}

我尝试了一些东西，但由于我不了解它是如何工作的以及我实际尝试过的东西，所以我不会把它......

任何人都可以帮助我或带领我吗？谢谢！

编辑：

正如您在此图片中看到的那样：

在顶部有应用程序表格的第一部分。如果用户添加了大量的Responsable，这是巨大的。所以我想让Type和Uid在同一条线上。

（我在这里只谈论负责任，但此表格上还有其他收藏，这就是为什么我要简化它）

Answer 1

是的，Symfony doc关于这一点并不十分清楚。为了实现你想要的目标：

创建文件prototype_layout.html.twig：

{% block _application_responsables_entry_row %}
    <div class="row">
        <div class="col-sm-6">{{ form_row(form.type) }}</div>
        <div class="col-sm-6">{{ form_row(form.id) }}</div>
    </div>
{% endblock %}

块的名称很重要。第一部分是_application，因为您的父表单称为ApplicationType，第二部分称为_responsables，因为您拥有该集合的表单字段称为。第三部分必须始终为_entry_row才能实现此目的。

要确保您拥有正确名称的第一部分和第二部分，请使用浏览器的检查工具查看DOM中与您的集合对应的select html元素的ID。

在config.yml的树枝部分中将此文件声明为全局表单主题：

twig:
    form_themes:
        - 'AppBundle:Form:prototype_layout.html.twig' #adapt this path if you saved your file elsewhere

您也可以直接在表单视图中使用该文件（在您的情况下为new.html.twig）：

{% use "AppBundle:Form:prototype_layout.html.twig" %}

Answer 2

将这些内容带入Inline，并在聊天中讨论。

这是使用纯 CSS。

的解决方案之一

所需输出的图片参考：

正如您在https://codeshare.io/GbQPkA中提供的代码一样，我们可以通过 CSS 来实现输出。

只需在样式表中添加以下给定的 CSS ，它可能正常。

<强> CSS

div[id*="mybundle_application_responsables_"]{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
div[id*="mybundle_application_responsables_"] > .form-group {
    flex-grow: 1;
    width: 100%;
    padding: 10px;
}

希望这对您有所帮助。如果您愿意，我会使用更新的 CSS 分享代码片段中的代码。

感谢。

使用引导程序自定义集合

2 个答案: