CODEWITHSUNDEEP
javascriptcssmodal-dialogtwitter-bootstrap-3
jayeshkv
jayeshkv

Reputation: 2208

re-size the modal dialog in bootstrap dynamically

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";
    }
});
}

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>

Upvotes: 8

Views: 101944

Answers (6)

Bass Jobsen
Bass Jobsen

Reputation: 49044

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

Upvotes: 23

Amit Shah
Amit Shah

Reputation: 8179

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;   
}

Upvotes: 15

M.Thenmozhi
M.Thenmozhi

Reputation: 11

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

Upvotes: 1

Luminous
Luminous

Reputation: 1909

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.

Upvotes: 2

Savan Kachhiya Patel
Savan Kachhiya Patel

Reputation: 1084

Change this to your code

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

and this

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

Upvotes: 2

user3460493
user3460493

Reputation: 11

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.

Upvotes: 0

Related Questions