re-size the modal dialog in bootstrap dynamically

Question

I have a Modal Popup (Bootstrap) which displays content based on the user selection

• I've used this as my reference, Also added this to my script section in the aspx page

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

Answer 1

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.

See: http://bootply.com/88364

Answer 2

I had the same problem and found that the issue was not the modal itself. I added an ID to each element inside of the and via CSS just add a width:100% to all of them.

It worked for me.

Answer 3

$('#myModal').on('shown.bs.modal', function () {
    $(this).find('.modal-dialog').addClass('modal-lg');
});

Answer 4

This worked for me atleast:

.modal-dialog{
    position: relative;
    display: table; /* <-- This makes the trick */
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;   
}

Answer 5

Change this to your code

<div class="modal-dialog" style="width: 95%">

and this

<div class="table-responsive" style="width:100%">

Answer 6

If you set display: table; inside the div holding the modal it'll resize accordingly. My modal is draggable and doesn't resize when you change the size of the browser, but this is the only workable solution I found for dynamic modal sizes.