How to make the width of select2 show full?

<div >
  <label >{{ __('Pages') }}</label>
  <select name="item[{{ $reasonItem['id'] }}][page]"  required>
    <option value="">{{ __('Choose') }}</option>
      @foreach($pages as $key=>$val)
        <option value="{{ $key }}" {{ (($key == ($reasonItem['page'] ?? '') ) ? "selected":"") }}>{{$val}}</option>
      @endforeach
  </select>
</div>

CodePudding user response：

You can try this:

<select name="item[{{ $reasonItem['id'] }}][page]"  style="width:100%" required>

It will be work, I checked.

CodePudding user response：

Try with:

.select2.select2-container {
    width: 100% !important;
}

CodePudding user response：

Add w-auto class or w-100 if Bootstrap 5