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

user_9779846 0
Viewed 144

Background

I'm using EasyAdmin3 (Symfony 5) and I would like to have a two-column concept in the EDIT-View. The code below is "reducing" the width of a block correctly to 50%, but they are not next to each other.

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

    [...]
}

Question

I quess, I need to surround it with a DIV-element containing class="row". But how?

Any idea, what I can do? Thanks!

easyadmin bootstrap-4 symfony5
1 Answers

My workaround

I decided to solve it with JavaScript. So I checked the HTML-Code for the name of the FORM and inject with JavaScript the row-class to this element. The JavaScript-file needs to be populated via the Dashboad-Controller (to be reusable for additional elements in future).

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

    [...]
}
user_97798460
Related