I have a Modal Popup (Bootstrap) which displays content based on the user selection
This is the javascript code that i've used to check for the users selection
PlayerMP.getFunctionalDetails = function (type, UserID, SessionID, SessionNo) {
$.ajax({
type: "GET",
url: PlayerMP.URL,
data: "rt=4&type=" + type + "&UserID=" + UserID + "&SessionID=" + SessionID + "&SessionNo=" + SessionNo,
success: function (FunctionalSplitsJS) {
if (FunctionalSplitsJS.indexOf("SessionExpired=1", 0) == -1) {
$("#divFunctionalDetails").html(FunctionalSplitsJS);
switch (type) {
case 1:
$("#divFunctionalsSplit"); //the table goes out of the modal window
break;
case 2:
TallyFunctionalSheet();
$("#divFunctionalsSplit");
break;
case 3:
$("#divFunctionalsSplit");
break;
}
$("#divFunctionalsSplit").modal('show');
}
else
window.location.href = "../Login.aspx?SessionExpired=1";
}
});
}
table-responsive
seem to be working) But when i resize the browser to match the width of the tablet the table/modal auto resizes to match each other.This is the code for the modal window thats being called
<div class="modal fade" id="divFunctionalsSplit" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="table-responsive">
<div id="divFunctionalDetails"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
</div>
</div>
</div>
</div>
By default boottrap sets the width of the .modal-dialog to 600px (large screens above 768 px) or auto (small screens). The code below overwrite this:
$('#myModal').on('shown.bs.modal', function () {
$(this).find('.modal-dialog').css({width:'auto',
height:'auto',
'max-height':'100%'});
});
(based on: https://stackoverflow.com/a/16152629/2260496)
To make it more dynamically you will need to calculate the width (jQuery width() or innerwidth())of your table and set the width of the modal-dialog according it.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments