Décrivez ici votre problème ou ce que vous cherchez à faire.
{% extends '@EasyAdmin/page/content.html.twig' %}
{# templates/bundles/EasyAdminBundle/default/field_services.html.twig #}
{% block page_title %}Hello PublicationController!{% endblock %}
{% block stylesheets %}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
{% endblock %}
{% block javascripts %}
{% endblock %}
{% block main %}
<form action="{{ path('app_publication') }}" method="post" enctype="multipart/form-data" class="row">
<div class="col-md-8">
<div class="mb-3">
{{ form_row(form.titre, {'attr': {'class': 'form-control', 'placeholder': 'Titre'}}) }}
</div>
<div class="mb-3">
<textarea name="editor_content" id="editor_content" class="form-control"></textarea>
</div>
<div class="mb-3">
{{ form_row(form.typeMedia , {'attr': {'class': 'form-control', 'placeholder': 'Type de media'}}) }}
</div>
<div class="mb-3">
<input type="file" name="img" class="form-control" placeholder="Charger un fichier">
</div>
</div>
<div class="col-md-4">
<div class="mb-3">
<label for="groupes" class="form-label">Groupes</label>
<select name="groupes[]" id="groupes" class="form-control" multiple>
{% for grs in gr %}
<option value="{{ grs.id }}">{{ grs.libelle }}</option>
{% endfor %}
</select>
</div>
<div class="mb-3">
<label for="utilisateurs" class="form-label">Utilisateurs</label>
<select name="utilisateurs[]" id="utilisateurs" class="form-control" multiple>
{% for user in users %}
<option value="{{ user.id }}">{{ user.username }}</option>
{% endfor %}
</select>
</div>
<div class="mb-3">
<label for="Sdirections" class="form-label">Sous Directions</label>
<select name="Sdirections[]" id="Sdirections" class="form-control" multiple>
{% for sdir in sd %}
<option value="{{ sdir.id }}">{{ sdir.libelle }}</option>
{% endfor %}
</select>
</div>
<div class="mb-3">
<label for="services" class="form-label">Services</label>
<select name="services[]" id="services" class="form-control" multiple>
{% for service in serv %}
<option value="{{ service.id }}">{{ service.libelle }}</option>
{% endfor %}
</select>
</div>
<div class="form-check">
<input id="activer" class="form-check-input" type="checkbox">
<label for="activer" class="form-check-label ml-2">Activer</label>
</div>
<button class="btn btn-primary shadow-md mt-2">Enregistrer</button>
</div>
</form>
<div class="container mt-4">
<label for="exampleSelect" class="form-label">Sélectionnez plusieurs options</label>
<select multiple class="form-select" id="exampleSelect">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
</div>
<script>
ClassicEditor
.create(document.querySelector('#editor_content'))
.then(editor => {
console.log('CKEditor initialized');
})
.catch(error => {
console.error('CKEditor initialization error:', error);
});
</script>
<!-- BEGIN: Modal Content -->
<div id="header-footer-modal-preview" class="modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- BEGIN: Modal Header -->
<div class="modal-header">
<h2 class="font-medium text-base mr-auto">Ajouter un nouveau groupe</h2> <button class="btn btn-outline-secondary hidden sm:flex"> <i data-lucide="file" class="w-4 h-4 mr-2"></i> Download Docs </button>
<div class="dropdown sm:hidden"> <a class="dropdown-toggle w-5 h-5 block" href="javascript:;" aria-expanded="false" data-tw-toggle="dropdown"> <i data-lucide="more-horizontal" class="w-5 h-5 text-slate-500"></i> </a>
<div class="dropdown-menu w-40">
<ul class="dropdown-content">
</ul>
</div>
</div>
</div> <!-- END: Modal Header -->
<!-- BEGIN: Modal Body -->
<form action="{{ path('app_groupe') }}" method="post" enctype="multipart/form-data">
<div class="modal-body grid grid-cols-12 gap-4 gap-y-3">
<div class="col-span-12 sm:col-span-12"> <div class="mt-3">
<div class="col-span-12 sm:col-span-6"> <label for="modal-form-3" class="form-label">Libelle</label> <input id="modal-form-3" type="text" class="form-control" name="libelle" placeholder="Entrer le nom du Groupe"> </div>
<label for="post-form-3" class="form-label">Utilisateur</label>
<select name="utilisateurs[]" data-placeholder="Select categories" class="tom-select w-full" id="post-form-3" multiple>
{% for user in users %}
<option value="{{ user.id }}">{{ user.username }}</option>
{% endfor %}
</select>
</div> </div>
</div> <!-- END: Modal Body -->
<!-- BEGIN: Modal Footer -->
<div class="modal-footer"> <button type="button" data-tw-dismiss="modal" class="btn btn-outline-secondary w-20 mr-1">Retour</button> <button type="submit" class="btn btn-primary w-20">Enregistrer</button> </div> <!-- END: Modal Footer -->
</form>
</div>
</div>
</div>
<script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/classic/ckeditor.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- CDN de Bootstrap JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
{% endblock %}
Ce que je veux
bonjour j ai creer un controlleur personnalisé dans esay admin qui redirige vers cette vue pour afficher mes liste deroulante a choix multiple et mon modal d ajout de groupe
Ce que j'obtiens
mais mes select a choix multiple s affiche en card avec toutes les options et mon modal ne fonctionne pas