Here's the code snippet that I'm working with:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">My title</h4>
</div>
<div class="modal-body">
<div id="problem_desc">
</div>
<div id="problem_sol">
</div>
</div>
<div class="modal-footer">
<div id="modalbutton">
</div>
</div>
</div>
</div>
</div>
Now, when I use AJAX to populate the divs dynamically, it looks something like this:
$('#problem_desc').html('<div class="form-group error">'+data.problem.problem_description+'</div>');
...
$('#problem_sol').html(<div class="form-group error"> <label for="probselect"
class="col-sm-3 control-label">Something</label><div class="col-sm-9">
<select class="form-control" id="probselect"></select></div>);
I repeat these functions 2 or 3 times to generate a form within the modal.
There are different scenarios based on the AJAX response which determine what should be included in the modal. Hence, I can't predefine the form and then fill it with AJAX. It needs to be created dynamically.
I expect the modal body to adjust its size based on the number of divs and columns I add. This resizing functionality works fine without dynamic addition of elements.
The issue arises when using jQuery to append elements, as the modal body does not resize accordingly and the form ends up overlapping the footer.
Any advice on how to address this problem?