I have this modal with bootstrap 5 and select 2 but moving the modal messes up any selection and I don't know how to fix the data so it doesn't go elsewhere.
In the selects that are first, they are automatically selected when I click on the select and that is not the intention, but you can choose the data.
I don't know if that can be fixed with css or with the same configuration of select2 that I don't know.
$(document).ready(function () {
showSelect2();
});
function showSelect2() {
$('.class_active_search_select').select2({
theme: "bootstrap-5",
placeholder: "Seleccione",
minimumResultsForSearch: 1,
dropdownParent: $("#myModal"),
dropdownAutoWidth: true,
multiple: false,
width: '100%',
language: {
noResults: function (term) {
return '<b>Sin coincidencias !!!</b>';
}
},
escapeMarkup: function (markup) {
if (markup === "Searching…") {
markup = "<b>Cargando datos... por favor espere !</b>";
}
return markup;
},
allowClear: true
});
$('.class_active_search_select').css('width', '100%');
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Modal Example</h3>
<p>Click on the button to open the modal.</p>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Open modal
</button>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form id="NuevoForm" name="NuevoForm" class="formlogin was-validated">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<label>Nombre</label>
</div>
<div class="col-md-6">
<label>Branch</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<input type="text" id="Nombre" name="Nombre" data-placeholder="select state" data-toggle="tooltip-primary-gris" data-placement="top" title="El nombre de la agencia puede contener mayúsculas y minúsculas, números y símbolos, el sistema toma como iguales las mayúsculas y minúsculas del mismo caracter" class="form-control tamanoInput" placeholder="Escriba un Nombre" required>
<div class="invalid-feedback">
Escriba un Nombre.
</div>
</div>
<div class="col-md-6">
<input type="text" id="CodigoBranch" name="CodigoBranch" data-placeholder="select state" data-toggle="tooltip-primary-gris" data-placement="top" title="Anote el branch asociado a la agencia según AS400" class="form-control tamanoInput" placeholder="Escriba un Branch" maxlength="4" required>
<div class="invalid-feedback">
Escriba un Branch.
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<label>Provincia</label>
</div>
<div class="col-md-6">
<label>Canton</label>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<select name="CodigoProvincia" id="CodigoProvincia" data-toggle="tooltip-primary-gris" data-placement="top" title="Seleccione la Provincia en la que se encuentra la Agencia Bancaria" class="form-control class_active_search_select form-select" required="">
<option selected="" disabled="" value="">Seleccione</option>
<option value="1">CRC</option>
<option value="2">USD</option>
<option value="3">EUR</option>
</select>
<div class="invalid-feedback">
Seleccione una provincia válida.
</div>
</div>
<div class="col-md-6 form-group">
<select name="CodigoCanton" id="CodigoCanton" data-toggle="tooltip-primary-gris" data-placement="top" title="Seleccione el Cantón al que pertenece la Agencia Bancaria" class="form-control class_active_search_select form-select" required="">
<option selected="" disabled="" value="">Seleccione</option>
<option value="1">CRC</option>
<option value="2">USD</option>
<option value="3">EUR</option>
</select>
<div class="invalid-feedback">
Seleccione un canton válido.
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Distrito</label>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<select name="CodigoDistrito" id="CodigoDistrito" data-toggle="tooltip-primary-gris" data-placement="top" title="Seleccione el Distrito al que pertece" class="form-control class_active_search_select form-select" required="">
<option selected="" disabled="" value="">Seleccione</option>
<option value="1">CRC</option>
<option value="2">USD</option>
<option value="3">EUR</option>
</select>
<div class="invalid-feedback">
Seleccione un distrito válido.
</div>
</div>
<div class="col-md-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<input type="checkbox" class="Activo" name="Activo" value="true" checked="checked">
</div>
<label class="position" data-placeholder="select state" data-toggle="tooltip-primary-gris" data-placement="top" title="Marque Activar para que la agencia quede activa">Activar</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Dirección</label>
</div>
</div>
<div class="row">
<div class="col-md-12">
<textarea class="form-control" data-placeholder="select state" data-toggle="tooltip-primary-gris" data-placement="top" title="La dirección puede contener números y letras, y tiene un máximo de 200 caracteres" name="Direccion" id="Direccion" rows="3" maxlength="200" required></textarea>
<div class="invalid-feedback">
Escriba una dirección.
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-4">
<label>País</label>
</div>
<div class="col-md-4">
<label>CEDI</label>
</div>
<div class="col-md-4">
<label>Código de agencia</label>
</div>
</div>
<div class="row">
<div class="col-md-4 form-group">
<select name="CodigoPais" id="CodigoPais" data-toggle="tooltip-primary-gris" data-placement="top" title="Seleccione el Distrito al que pertece" class="form-control class_active_search_select form-select" required="">
<option selected="" disabled="" value="">Seleccione</option>
<option value="1">CRC</option>
<option value="2">USD</option>
<option value="3">EUR</option>
</select>
<div class="invalid-feedback">
Seleccione un pais válido.
</div>
</div>
<div class="col-md-4 form-group">
<select name="CodigoCEDI" id="CodigoCEDI" data-toggle="tooltip-primary-gris" data-placement="top" title="Seleccione un CEDI en la que se encuentra la Agencia Bancaria" class="form-control class_active_search_select form-select" required="">
<option selected="" disabled="" value="">Seleccione</option>
<option value="1">CRC</option>
<option value="2">USD</option>
<option value="3">EUR</option>
</select>
<div class="invalid-feedback">
Seleccione un CEDI válido.
</div>
</div>
<div class="col-md-4">
<input type="text" id="CodigoAgencia" name="CodigoAgencia" data-placeholder="" data-toggle="tooltip-primary-gris" data-placement="top" title="Es un código de 5 dígitos numéricos que se crea automáticamente la primera vez que se crea el registro" class="form-control tamanoInput" placeholder="" maxlength="5" disabled>
</div>
</div>
<div class="row">
<div class="col-md-4">
<label>Grupo de agencias</label>
</div>
</div>
<div class="row">
<div class="col-4 col-sm-4 form-group">
<select name="CodigoGrupoAgencias" id="CodigoGrupoAgencias" data-toggle="tooltip-primary-gris" data-placement="top" title="Seleccione el grupo de agencia en la que se encuentra la Agencia Bancaria" class="form-control class_active_search_select form-select" required="">
<option selected="" disabled="" value="">Seleccione</option>
<option value="1">CRC</option>
<option value="2">USD</option>
<option value="3">EUR</option>
</select>
<div class="invalid-feedback">
Seleccione un grupo de agencia válido.
</div>
</div>
</div>
</div>
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
