Autour de Laravel

Select2 - problème d'affichage

  • Avatar de CedricMeschin
    Membre depuis :
    04/02/2018
    Messages :
    17

    Bonsoir,

    J'ai un petit problème d'affichage dans un formulaire avec le "select2" dont voici l'exemple en image:

    comme on peut le voir les listes déroulantes simple et multi du premier formulaire ne sont pas affichées entièrement alors que celles du second le sont bien; la liste multisélection "Fonctions" est bien gérée avec l'affichage des "vignettes".

    Voici le contexte d'affichage de ces formulaires:
    sur la page précédente je sélectionne un ou plusieurs éléments que je viens afficher ici de manière plus détaillée.
    Si je sélectionne un seul élément, tout s'affiche correctement dans les listes déroulantes.
    Si j'en sélectionne plusieurs, seul le dernier est affiché correctement.

    J'utilise un template et une boucle pour remplir ces formulaires. Ils sont donc créés de manière strictement identiques.
    Voici le code si cela peut vous aider à m'apporter une piste sur la résolution...
    extrait du fichier parametrage.blade.php

    <div class="col-md-9">
    @if (count($myHosts) > 0)
    @foreach ($myHosts as $host)
    <div class="collapse multi-collapse" id="collapseH{{ $host['host_id'] }}">
    @include('template.host')
    </div>
    @endforeach
    @endif
    </div>

    fichier template host.blade.php

    @component('components.card')
    @slot('title')
    {{ $host['host_name'] . " / " . $host['host_address'] }}
    @endslot
    <div class="row">
    <div class="col-md-3">
    @include('partials.form-group-select', [
    'title' => ('Site'),
    'type' => 'select',
    'name' => 'hostsite',
    'values' => $sites,
    ])
    </div>
    <div class="col-md-3">
    @include('partials.form-group-select', [
    'title' =>
    ('Type'),
    'type' => 'select',
    'name' => 'hosttype',
    'values' => $hostTypes,
    ])
    </div>
    <div class="col-md-4">
    @include('partials.form-group-input', [
    'title' => ('Nom'),
    'type' => 'text',
    'name' => 'hostname',
    'value' => $host['host_name'],
    'placeholder' => "HOST-NAME",
    'required' => true,
    'readonly' => false,
    ])
    </div>
    <div class="col-md-2">
    @include('partials.form-group-input', [
    'title' => __('Adresse IP'),
    'type' => 'text',
    'name' => 'hostaddress',
    'value' => $host['host_address'],
    'placeholder' => "HOST-IP",
    'required' => true,
    'readonly' => false,
    ])
    </div>
    </div>
    <div class="row">
    <div class="col-md-4">
    @include('partials.form-group-text', [
    'title' =>
    ('Description'),
    'type' => 'text',
    'rows' => 2,
    'name' => 'description',
    'value' => $host['host_alias'],
    'placeholder' => "short description of host",
    'required' => true,
    'readonly' => false,
    ])
    </div>
    <div class="col-md-2">
    @include('partials.form-group-select', [
    'title' => ('OS'),
    'type' => 'select',
    'name' => 'hostOss',
    'values' => $hostOss,
    ])
    </div>
    </div>
    <div class="row">
    <div class="col-md-3">
    @include('partials.form-group-select', [
    'title' =>
    ('Solution logicielle'),
    'type' => 'select',
    'name' => 'Solution',
    'values' => $solutions,
    ])
    </div>
    <div class="col-md-3">
    @include('partials.form-group-select-multiple', [
    'title' => __('Fonction(s)'),
    'type' => 'select',
    'name' => 'hostFonctions',
    'values' => $hostFonctions,
    ])
    </div>

    </div>
    @endcomponent
    @section('script')
    <script>
    $('.select2').select2();
    </script>
    @endsection

    fichier component card.blade.php

    <div class="card text-white bg-dark mb-2">
    <h4 class="card-header">
    {{ $title }}
    </h4>
    <div class="card-body">
    {{ $slot }}
    </div>
    </div>

    fichier partial form-group-select.blade.php

    <div class="form-group">
    <label for="{{ $name }}">{{ $title }}</label>
    <div class="form-control">
    <select id="{{ $name }}" name="{{ $name }}[]" class="select2 form-control{{ $errors->has( $name .'[]') ? ' is-invalid' : ''}}" required style="width: 100%">
    <option value="">...</option>
    @foreach($values as $value)
    @if ( in_array($host['host_name'], $value['selected']))
    <option value="{{ $value['id'] }}" selected>{{ $value['alias'] }}</option>
    @else
    <option value="{{ $value['id'] }}">{{ $value['alias'] }}</option>
    @endif
    @endforeach

    </select>
    @if ($errors->has($name))
    <div class="invalid-feedback">
    {{ $errors->first($name) }}
    </div>
    @endif
    </div>
    </div>

    fichier partial form-group-select-multiple.blade.php

    <div class="form-group">
    <label for="{{ $name }}">{{ $title }}</label>
    <div class="form-control">
    <select id="{{ $name }}" name="{{ $name }}[]" class="select2 form-control{{ $errors->has( $name .'[]') ? ' is-invalid' : ''}}" multiple required style="width: 100%">
    <option value="">...</option>
    @foreach($values as $value)
    @if ( in_array($host['host_name'], $value['selected']))
    <option value="{{ $value['id'] }}" selected>{{ $value['alias'] }}</option>
    @else
    <option value="{{ $value['id'] }}">{{ $value['alias'] }}</option>
    @endif
    @endforeach

    </select>
    @if ($errors->has($name))
    <div class="invalid-feedback">
    {{ $errors->first($name) }}
    </div>
    @endif
    </div>
    </div>

    cordialement,
    Cédric

  • Avatar de CedricMeschin
    Membre depuis :
    04/02/2018
    Messages :
    17

    Je viens de corriger une partie du problème notamment sur les listes simples en ajoutant dans le style "height: 100%"

    fichier partial form-group-select.blade.php

    <div class="form-group">
    <label for="{{ $name }}">{{ $title }}</label>
    <div class="form-control">
    <select id="{{ $name }}" name="{{ $name }}[]" class="select2 form-control{{ $errors->has( $name .'[]') ? ' is-invalid' : ''}}" required style="height: 100%;width: 100%">
    <option value="">...</option>
    @foreach($values as $value)
    @if ( in_array($host['host_name'], $value['selected']))
    <option value="{{ $value['id'] }}" selected>{{ $value['alias'] }}</option>
    @else
    <option value="{{ $value['id'] }}">{{ $value['alias'] }}</option>
    @endif
    @endforeach

    </select>
    @if ($errors->has($name))
    <div class="invalid-feedback">
    {{ $errors->first($name) }}
    </div>
    @endif
    </div>
    </div>

    C'est pas super propre, tout comme le width à 100% d'ailleurs... mais c'est la seule solution que j'ai trouvée pour l'instant pour que ça s'affiche correctement.

    Il reste donc le problème du multiselect...

    Cédric

  • Avatar de CedricMeschin
    Membre depuis :
    04/02/2018
    Messages :
    17

    Bonsoir,
    Un petit up! :)

    merci.
    Cédric

  • Avatar de MaitrePylos
    Membre depuis :
    27/05/2013
    Messages :
    245

    Bonjour,

    Si je compare, chez moi, la seule différence que je répère est le multiple qui est définit à multiple

    <select id="{{ $name }}" name="{{ $name }}[]" class="select2 form-control{{ $errors->has( $name .'[]') ? ' is-invalid' : ''}}" multiple="multiple" required style="width: 100%">
  • Avatar de CedricMeschin
    Membre depuis :
    04/02/2018
    Messages :
    17

    Bonsoir,

    Pardon pour le retour tardif, je n'ai pas reçu de notification sur votre réponse...

    J'ai réécrit une partie du code et je l'ai réécrit de cette manière, cependant "required" fonctionne sans pour autant nécessiter cette syntaxe "double".
    Normalement, la syntaxe multiple est équivalente à multiple="multiple"; ce qui est vérifié avec required
    De plus, la seconde section est affichée correctement; et comme c'est une boucle qui génère les deux sections, le code est strictement identique.

    Je pense donc que c'est l'exécution du javascript "select2" qui pose problème.
    Je viens de trouver une possible explication à ce problème sur github (https://github.com/select2/select2/issues/5379)

    Je vais essayer d'appliquer le contournement indiqué pour voir si cela fonctionne. Par contre, je ne suis pas sûr d'avoir bien compris comment implémenter le contournement...
    Je reviens poster la solution ou la suite du problème ici dans quelques... minutes, heures ou jours :)

Vous ne pouvez pas répondre à ce sujet.