110

I have database content which has different types of data, such as Youtube videos, Vimeo videos, text, Imgur pictures, etc. All of them have different heights and widths. All I have found while searching the Internet is changing the size to only one parameter. It has to be same as the content in the popup.

This is my HTML code. I also use Ajax to call the content.

<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="ModalLabel"></h3>
    </div>
    <div class="modal-body">

    </div>
</div> 

16 Answers 16

140

This worked for me, none of the above worked.

.modal-dialog{
    position: relative;
    display: table; /* This is important */ 
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;   
}
9
  • 2
    @GreenAsJade may this links helps you to understand: colintoh.com/blog/display-table-anti-hero iandevlin.com/blog/2013/06/css/css-stacking-with-display-table
    – Amit Shah
    Commented May 3, 2016 at 1:29
  • 1
    @maheshreddy Welcome, don't forget to vote +1 if it helps. so others can put more trust on this answer and give a try.
    – Amit Shah
    Commented Jun 8, 2016 at 1:24
  • It dynamically sets height, but this time modal dialog is opened on the left side of the screen. How to fix it?
    – Jack
    Commented Sep 8, 2016 at 14:34
  • 1
    but this is not working in responsive, mobile view. It is pretty working in laptop screens.
    – chetan
    Commented Sep 9, 2016 at 9:35
  • 4
    This worked but it had the unintended impact of the modal no longer being vertically centered in the page. Not a big deal at all but I thought I'd mention something. Commented Oct 12, 2018 at 19:57
117

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).
5
  • i had to change #modal to same as .moda-body now it work perfectly. thank you very much!
    – Erdem Ece
    Commented Apr 22, 2013 at 18:23
  • 8
    @PSL, +1 for the answer and for introducing me to kbd in SO. Commented Jun 27, 2013 at 14:04
  • looks like show event does not work. this worked: $('#modal').on('show.bs.modal', function () { getbootstrap.com/javascript/#modals-events
    – joym8
    Commented Mar 6, 2015 at 22:32
  • +1 for detail and accommodating the old and the new. Now if only it didn't just fill up the entire width of the screen and was actually being dynamic in size.
    – Luminous
    Commented Jun 17, 2015 at 21:30
  • @PSL on runtime how can manipulate the width of the modal?I mean make it smaller or greater with JavaScript? Commented Jan 8, 2016 at 19:02
22

I couldn't get PSL's answer working for me so I found all I have to do is set the div holding the modal content with style="display: table;". The modal content itself says how big it wants to be and the modal accommodates it.

2
  • 5
    I couldn't get PSL's answer working either. (Maybe because I was using the Angular version of bootstrap) This worked for me. Just to note that this style is added on the .modal-dialog class +1
    – user227353
    Commented Jul 21, 2015 at 16:47
  • I applied your solution to the div having as class "modal-content" ,, Worked for me.
    – Mehdi
    Commented Nov 18, 2018 at 3:13
12

There are many ways to do this if you want to write css then add following

.modal-dialog{
  display: table
}

In case if you want to add inline

<div class="modal-dialog" style="display:table;">
//enter code here
</div>

Don't add display:table; to modal-content class. it done your job but disposition your modal for large size see following screenshots. first image is if you add style to modal-dialog In case if you add style to modal-dialog if you add style to modal-content. it looks dispositioned. enter image description here

7

for bootstrap 3 use like

$('#myModal').on('hidden.bs.modal', function () {
// do something…
})
2
  • 4
    Just to add to this hidden.bs.modal will fire after the modal is closed. Use show.bs.modal to fire on bootstrap 3 when the modal is triggered.
    – d3c0y
    Commented Oct 27, 2013 at 0:58
  • How will this resize the dialog in any way or form? It simply is a callback function that is triggered when the modal dialog is hidden (or shown). Commented Feb 25, 2020 at 15:34
4

Simple Css work for me

.modal-dialog { 
max-width : 100% ;
}
2

I simply override the css:

.modal-dialog {
    max-width: 1000px;
}
2

set width:fit-content on the modal div.

1

You can do that if you use jquery dialog plugin from gijgo.com and set the width to auto.

$("#dialog").dialog({
  uiLibrary: 'bootstrap',
  width: 'auto'
});
<html>
<head>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <link href="http://code.gijgo.com/1.0.0/css/gijgo.css" rel="stylesheet" type="text/css">
  <script src="http://code.gijgo.com/1.0.0/js/gijgo.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="dialog" title="Wikipedia">
   <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png" width="320"/>
 </div>
</body>
</html>

You can also allow the users to control the size if you set resizable to true. You can see a demo about this at http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable

1

A simple CSS solution that will vertically and horizontally center the modal:

.modal.show {
  display: flex !important;
  justify-content: center;
}

.modal-dialog {
  align-self: center;
}
0

For Bootstrap 2 Auto adjust model height dynamically

  //Auto adjust modal height on open 
  $('#modal').on('shown',function(){
     var offset = 0;
     $(this).find('.modal-body').attr('style','max-height:'+($(window).height()-offset)+'px !important;');
  });
0

I had the same problem with bootstrap 3 and the modal-body div's height not wanting to be greater than 442px. This was all the css needed to fix it in my case:

.modal-body {
    overflow-y: auto;
}
0

Mine Solution was just to add below style. <div class="modal-body" style="clear: both;overflow: hidden;">

0

As of Bootstrap 4 - it has a style of:

@media (min-width: 576px)
.modal-dialog {
    max-width: 500px;
}

so if you are looking to resize the modal width to some-width larger, I would suggest using this in your css for example:

.modal-dialog { max-width: 87vw; }

Note that setting width: 87vw; will not override bootstrap's max-width: 500px;.

0

My search led me here so might as well add my two cents worth of idea. If you are using Monkey friendly Twitter Bootstrap modal then you can do something like this:

    var dialog = new BootstrapDialog({
        id: 'myDialog',
        title: 'Title',
        closable: false,
        // whatever you like configuration here...
    });

    dialog.realize();
    if (isContentAYoutubeVideo()) {
        dialog.getModalDialog().css('width', '80%'); // set the width to whatever you like
    }
    dialog.open();

Hope this helps.

-1

If you only want your modal box to resize when the content overflow, otherwise keep original size.

Use

<div class="modal-dialog" style="display:grid;">

instead of

<div class="modal-dialog" style="display:table;">

display:table; display:grid; enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.