Como eu ajusto a largura do option de um selectpicker dentro de um Modal?
A largura do select fica ajustada normalmente a largura do modal, porém quando abro o selectpicker, os dados no option se ajustam a lergura total da tela.
Eis um exemplo de como estou utilizando o modal:
<div class="modal fade" id="mymodal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog"
aria-labelledby="mymodal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="border-radius: 0">
<div class="modal-header">
<h6 class="modal-title"> My Modal</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<form role="form" id="form1" name="form1" method="post" action="action.do">
<div class="modal-body" style="overflow: visible;">
<div class="form-group">
<select class="selectpicker form-control" data-container="modal-body" data-live-search="true"
required data-style="btn-light btn-outline-secondary btn-sm btn-custom">
<option value=""><span>Select a value</span></option>
<option value="1"><span>Value 1</span></option>
<option value="2"><span>Value 2</span></option>
<option value="3"><span>Value 3</span></option>
<option value="4"><span>Value 4</span></option>
<option value="5"><span>Value 5</span></option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-outline-secondary" data-dismiss="modal">Exit</button>
</div>
</form>
</div>
</div>
Para exemplificar, o modal ao ser aberto, fica centralizado na página, com uma largura de aproximadamente 500px.
Quando clico no selectpicker, os dados abrem com a largura total da tela.
