I have a modal in Boostrap 4. I put <div class="modal-dialog modal-lg modal-dialog-scrollable">
I don’t know why when I choose from dropdown second time, body from modal is not scrolling, in console I don’t have any error!
I made an gif with how it works Gif movie with action
I call via ajax and display content in to modal. This is js code that I use:
$(document).ready(function(e) {
$('.select2bs4').select2({
theme: 'bootstrap4'
})
$('#map_cat').on('change', function() {
var cat = $("#map_cat option:selected").val();
$.ajax({
url: "products/categories/get_char_category",
type: "POST",
data: {
cat_id: cat,
[csrf_name]: csrf_value
},
dataType: "json",
beforeSend: function() {
$("#loaderDiv").show();
$('#characteristics').empty();
$('#text-inf').empty();
},
success: function(data) {
$("#loaderDiv").hide();
$('#characteristics').empty();
$('#text-inf').empty();
var textInf = '<div class="mb-4 text-center"><?php echo $this->lang->line('match_char '); ?></div>';
$('#text-inf').append(textInf);
var mandatory = '';
$.each(data, function(key, value) {
var mandatory = '';
if (value.name !== null) {
if (value.required !== null) {
var mandatory = 'mandatory';
}
var dataHtml = '<div class="col-md-12 form-group"><div class="row d-flex justify-content-between align-items-center"><div class="col-sm-6"><label class="' + mandatory + '"> ' + value.name + ' </label></div><div class="col-sm-6"><div><select name="char_id[]" class="form-control select2bs4"><option value="0"><?php echo $this->lang->line("char_select"); ?></option><?php foreach($chars as $cha){ ?><option value="<?php echo $cha->id; ?>"><?php echo $cha->char; ?></option><?php } ?></select></div></div></div></div>';
$('#characteristics').append(dataHtml);
$('.select2bs4').select2({
theme: 'bootstrap4'
})
}
});
},
error: function(xhr, textStatus, errorThrown) {
return false;
}
});
});
});