EasyAdmin3：编辑表单上的两列概念 (bootstrap)

Question

背景

我正在使用 EasyAdmin3 (Symfony 5)，我想在 EDIT-View 中有一个两列的概念。下面的代码将块的宽度正确地“减少”到 50%，但它们并不相邻。

class PersonCrudController extends AbstractCrudController {
    [...]

    public function configureFields(string $pageName): iterable {

        yield FormField::addPanel('Block 1')->setCssClass('col-sm-6');
        [...]

        yield FormField::addPanel('Block 2')->setCssClass('col-sm-6');
        [...]
    }

    [...]
}

问题

我想知道，我需要用一个包含 class="row" 的 DIV 元素包围它。但是怎么办？

知道吗，我能做什么？谢谢！

Answer 1

我的解决方法

我决定用JavaScript来解决。因此，我检查了 HTML-Code 的 FORM 名称，并用 JavaScript 将 row-class 注入到该元素中。 JavaScript-文件需要通过 Dashboad-Controller 填充（以便将来可重复用于其他元素）。

my_javascript.js

// call functions once page is loaded
document.addEventListener("DOMContentLoaded", function() {
    addClassToElement('edit-Person-form', 'row');
});

function addClassToElement(elementName, className) {
    let element = document.getElementById(elementName);

    if (element != null) {
        element.classList.add(className);
    }
}

仪表板控制器

[...]
public function configureAssets(): Assets {
    $assets = parent::configureAssets();

    $assets->addJsFile('js/my_javascript.js');

    return $assets;
}
[...]

PersonCrudController

class PersonCrudController extends AbstractCrudController {
    [...]

    public function configureFields(string $pageName): iterable {

        yield FormField::addPanel('Block 1')->setCssClass('col-sm-6');
        [...]

        yield FormField::addPanel('Block 2')->setCssClass('col-sm-6');
        [...]
    }

    [...]
}

EasyAdmin3：编辑表单上的两列概念 (bootstrap)

EasyAdmin3: two-column concept (bootstrap) on edit form

bootstrap-4

symfony5

easyadmin