Salut depuis plusieurs mois j'essaie de retirer une propriété "style" qui s'applique sur mon select qui est un component Laravel.

Au chargement de la page celui ci ajoute cette propriété "style = width : 100px"
J''ai fouillé dans le template mais rien.
J'ai essayé avec javascript sans reél succès.

---------------------Mon component---------------------
<div class="form-group @error($name) has-danger @enderror">
    <label for="{{ $id }}">{{ $label }}</label>
    <select id="{{ $id }}"
            name="{{ $name }}"
            @if ($multiple) multiple data-placeholder="{{ $placeholder }}" @endif
            {{ $required ? 'required' : '' }}
            class="
                select2 form-control custom-select
                {{ $multiple ? 'select2-multiple' : '' }}
    @error($name) form-control-danger @enderror"
    >
        @if (!$multiple)
            <option selected disabled value="">--{{ $placeholder }}--</option>
        @endif
        @foreach($elements as $element)
            <option
                {{ $isSelected($element['id']) ? 'selected': '' }} value="{{ $element['id'] }}">{{ $element['label'] }}</option>
        @endforeach
    </select>
    @error($name)
    <small class="form-control-feedback"> {{ $message }} </small>
    @enderror
</div>
-----------------------------------------------------------
--------------la declarartion de mon component dans ma vue ---------
<div class="form-body">
                            <div class="row">
                                <div class="col-12">
                                    <x-form.input type="date" name="date" label="Date"/>
                                </div>
                                <div class="col-md-12" id="section">
                                    <x-form.select :elements="$sections"  name="section" label="Section" placeholder="Choisissez la section de la production"/>
                                </div>
                            </div>
                        </div>

                        -----------------mon retour dans le navigateur------------
  <span class="select2 select2-container select2-container--default select2-container--focus" dir="ltr" style="width: 100px;"></span>

Merci pour d'avance :(

1 réponse


Salut,

L'attribut width est ecrasé par les "settings" de select2. Il faut que tu le definisse spécifiquement en appelant la fonction select2() sur ton element.

$('.js-example-basic-single').select2({
  placeholder: 'Select an option'
  width: '200px'
});

Source: https://select2.org/configuration