Resize modal dialog in bootstrap dynamically

Question

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

• I used this as my link, also added this to my script section on the aspx page

This is the javascript code that I used to test user 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"; } }); } 

• In the first case, there is a table that should be displayed inside the modal popup, but the table goes beyond the modal window (there is a problem with the width of the modal window, but table-responsive seems to work). when I resize the browser to fit the width of the tablet, the size of the table / modal auto changes to fit each other.
• The widths of the 2nd and 3rd modality bodies seem to work fine.

This is the code for a modal window 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
• Modified browser

Answer 1

By default, boottrap sets the width of the .modal-dialog to 600 pixels (large screens above 768 pixels) or automatically (small screens). The code below overwrites 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/318960/ )

To do this more dynamically, you will need to calculate the width (jQuery width () or innerwidth ()) of your table and set the width of the modal dialog to match it.

See: http://bootply.com/88364

Answer 2

This worked for me at least:

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

Answer 3

Change this to your code

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

and this one

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

Answer 4

If you installed display: table; inside a div holding a modal, it will resize accordingly. The modal function is draggable and does not change when the browser is resized, but this is the only workable solution that I found for dynamic modal sizes.

Answer 5

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

Answer 6

I had the same problem, and I found that the problem is not modality itself. I added an identifier for each element inside and through CSS, just add a width: 100% for all of them.

It worked for me.