Twitter Bootstrap Modal Width Issues

Twitter Bootstrap Modal Width issues

You could use jQuery to select the modal(s) in question and edit their CSS attributes. Using the following would set the modal to 90% of screen width and position it center of the screen:

$('#myModal').modal({
            backdrop: true,
            keyboard: true,
            show: false
        }).css({
            // make width 90% of screen
           'width': function () { 
               return ($(document).width() * .9) + 'px';  
           },
            // center model
           'margin-left': function () { 
               return -($(this).width() / 2); 
           }
    });

This would work when the page loads. Resize you browser and refresh the page and the modal should be centered in the screen taking up 90% of screen width.

Increase modal size for Twitter Bootstrap

I was having the exact same problem, you can try:

.modal-body {
    max-height: 800px;
}

If you notice the scroll-bars appear only on the body section of the modal dialog, this means that the max-height of only the body needs to be adjusted.

How to increase Bootstrap Modal Width?

In your code, for the modal-dialog div, add another class, modal-lg:

<div class="modal-dialog modal-lg">

Or if you wanna centre your modal dialog, use:

.modal-ku {
  width: 750px;
  margin: auto;
}

How can I change the default width of a Twitter Bootstrap modal box?

UPDATE:

In bootstrap 3 you need to change the modal-dialog.
So in this case you can add the class modal-admin in the place where modal-dialog stands.

Original Answer (Bootstrap < 3)

Is there a certain reason you're trying to change it with JS/jQuery?

You can easily do it with just CSS, which means you don't have to do your styling in the document.
In your own custom CSS file, you add:

body .modal {
    /* new custom width */
    width: 560px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -280px;
}

In your case:

body .modal-admin {
    /* new custom width */
    width: 750px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -375px;
}

The reason I put body before the selector is so that it takes a higher priority than the default. This way you can add it to an custom CSS file, and without worries update Bootstrap.

How to set twitter bootstrap modal wider and higher?

If your modal id is "myModal "

You could try adding a style like:

#myModal 
{
    width: 700px; 
    margin-top: -300px !important;
    margin-left:  -350px !important; 
} 

#myModal .modal-body {
    max-height: 525px;
}

Bootstrap Modal Width Overflow issue

Add this css rule

#lookup_zipsserved{
   word-wrap: break-word;
}

How to resize Twitter Bootstrap modal dynamically based on the content

Since your content must be dynamic you can set the css properties of the modal dynamically on show event of the modal which will re-size the modal overriding its default specs. Reason being bootstrap applies a max-height to the modal body with the css rule as below:

.modal-body {
    position: relative;
    overflow-y: auto;
    max-height: 400px;
    padding: 15px;
}

So you can add inline styles dynamically using jquery css method:

For newer versions of bootstrap use show.bs.modal

$('#modal').on('show.bs.modal', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

For older versions of bootstrap use show

$('#modal').on('show', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

or use a css rule to override:

.autoModal.modal .modal-body{
    max-height: 100%;
}

and add this class autoModal to your target modals.

Change the content dynamically in the fiddle, you will see the modal getting resized accordingly. Demo

Newer version of bootstrap see the available event names.

• show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
• shown.bs.modal This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
• hide.bs.modal This event is fired immediately when the hide instance method has been called.
• hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
• loaded.bs.modal This event is fired when the modal has loaded content using the remote option.

Older version of bootstrap modal events supported.

• Show - This event fires immediately when the show instance method is called.
• shown - This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).
• hide - This event is fired immediately when the hide instance method has been called.
• hidden - This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).

Modal width (increase)

Bootstrap 3

You can create or just override default bootstrap modal-lgby doing below:

.modal-lg {
    max-width: 80%;
}

If not working just add !important so it would look like below

.modal-lg {
    max-width: 80% !important;
}

Now call the modal-lg.

<div class="modal-dialog modal-lg" role="document">
 <!-- some modal content --->
</div

For Bootstrap 4 refer to @kitsu.eb answer. Also note that using bootstrap 4 utilities might break the responsiveness.

---

Related Topics