EasyAdmin3:编辑表单上的两列概念(引导)

Question

背景

我正在使用EasyAdmin3 (Symfony 5)，我希望在编辑视图中有一个两列的概念。下面的代码正确地将块的宽度“缩小”到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表单的名称，并使用JavaScript将row-class注入到该元素。JavaScript文件需要通过来填充(将来可以对其他元素进行重用)。

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

dashboard-controller

[...]
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');
        [...]
    }

    [...]
}