Javascript – re-size the modal dialog in bootstrap dynamically

cssjavascriptmodal-dialogtwitter-bootstrap-3

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
    Full screen image
  • Resized Browser
    Resized Image

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:

$('#myModal').on('show.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.

See: http://bootply.com/88364