Is there a way to adjust the text wrapping inside an option menu so that the option value matches the width of the select picker? Short text looks fine, but long text causes issues.
I've attempted various solutions on this platform without success. I am utilizing bootstrap classes and have not added any extra css yet.
Select option menu with short text
https://i.sstatic.net/nOOLw.png
Select option menu with long text
https://i.sstatic.net/y2pmN.png
<div class="form-group col-md-5">
<label for="programstrategis_id">Program Strategis</label>
<select id="programstrategis_id"
class="selectpicker data-content form-control @error ('programstrategis_id') is-invalid @enderror"
name="programstrategis_id">
<option selected disabled>--silahkan pilih program strategis berikut--</option>
@foreach ($programstrategis_id as $dataprogramstrategis)
<option value="{{ $dataprogramstrategis->id }}">{{$dataprogramstrategis->program_strategis}}
</option>
@endforeach
</select>
@error('programstrategis_id')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>
<div class="form-group col-md-5">
<label for="sasaran_id">Sasaran</label>
<select id="sasaran_id"
class="selectpicker form-control @error ('sasaran_id') is-invalid @enderror"
name="sasaran_id">
<option selected disabled>--silahkan pilih sasaran berikut--</option>
@foreach ($sasaran_id as $datasasaran)
<option value="{{ $datasasaran->id }}">{{$datasasaran->sasaran}}</option>
@endforeach
</select>
@error('sasaran_id')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>