How to resize Twitter Bootstrap modal dynamically based on the content

Question

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    lt div id  modal  class  modal hide fade  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt       lt div class  modal-header  gt           lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt    lt  button gt           lt h3 id  ModalLabel  gt  lt  h3 gt       lt  div gt       lt div class  modal-body  gt        lt  div gt   lt  div gt

User · Answer

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

User · Answer

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

User · Answer

Simple Css work for me    modal-dialog    max-width   100

User · Answer

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

User · Answer

for bootstrap 3 use like      myModal   on  hidden bs modal   function         do something

User · Answer

I simply override the css    modal-dialog       max-width  1000px

User · Answer

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

User · Answer

You can do that if you use jquery dialog plugin from gijgo com and set the width to auto    x000D   x000D      dialog   dialog   x000D    uiLibrary   bootstrap   x000D    width   auto  x000D      x000D   lt html gt  x000D   lt head gt  x000D     lt script src  https   code jquery com jquery-2 1 4 min js  gt  lt  script gt  x000D     lt link href  http   code gijgo com 1 0 0 css gijgo css  rel  stylesheet  type  text css  gt  x000D     lt script src  http   code gijgo com 1 0 0 js gijgo js  gt  lt  script gt  x000D       lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet  type  text css    gt  x000D   lt  head gt  x000D   lt body gt  x000D    lt div id  dialog  title  Wikipedia  gt  x000D      lt img src  https   upload wikimedia org wikipedia en thumb 8 80 Wikipedia-logo-v2 svg 1122px-Wikipedia-logo-v2 svg png  width  320   gt  x000D    lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    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

User · Answer

set width fit-content on the modal div

User · Answer

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

User · Answer

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

User · Answer

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    lt div class  modal-dialog  style  display table   gt    enter code here  lt  div gt    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  if you add style to modal-content  it looks dispositioned

User · Answer

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

User · Answer

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

User · Answer

Mine Solution was just to add below style   lt div class  modal-body  style  clear  both overflow  hidden   gt

[javascript] How to resize Twitter Bootstrap modal dynamically based on the content

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to twitter-bootstrap