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";
}
});
}
- The first case has a table which is supposed to be displayed inside the modal popup but the table goes outside the modal window (there is a problem with the width of the modal window but the
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. - The width of the 2nd and the 3rd case's of the modal seem to work fine.
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>
- Fullscreen Browser
- Resized Browser
Best Answer
By default Bootstrap sets the width of the
.modal-dialog
to 600px (large screens above 768 px) or auto(small screens). The code below overrides this:(based on: https://stackoverflow.com/a/16152629/2260496)
To make it more dynamically you will need to calculate the width (jQuery
width()
orinnerwidth()
)of your table and set the width of themodal-dialog
according it.See: http://bootply.com/88364