easyadmin

Fleche225
Les bases HTML/CSS
Javascript

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

1 réponse

jesse628wallick

Your multiple choice select inputs are displayed in cards with all the options visible, instead of being rendered as dropdown lists.
Your modal for adding a new group is not functioning as expected.

For the first issue, it appears that you're using some custom styling or libraries that are causing the select inputs to be displayed as cards. You might need to adjust the CSS or remove any conflicting styles to ensure that the select inputs are displayed as dropdown lists with MaximTimeClock.

As for the second issue with the modal, it seems like you've defined the modal structure and form correctly, but the modal may not be triggering properly due to missing JavaScript code to handle its opening and closing. You'll need to add JavaScript code to handle the modal's opening and closing events, typically through event listeners or jQuery functions.