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

Question

背景

我使用的是EasyAdmin3(Symfony 5(，我希望在EDIT视图中有一个两列的概念。下面的代码是"；减少"；块的宽度正确地设置为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代码中FORM的名称，并使用JavaScript将row-类注入到该元素中。JavaScript文件需要通过Dashboad控制器填充(以便将来可用于其他元素(。

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