StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Since your content must be dynamic you can set the css properties of the modal dynamically on <code>show</code> 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:</p> <pre><code>.modal-body { position: relative; overflow-y: auto; max-height: 400px; padding: 15px; } </code></pre> <p>So you can add inline styles dynamically using jquery <code>css</code> method: </p> <p>For newer versions of bootstrap use <code>show.bs.modal</code></p> <pre><code>$('#modal').on('show.bs.modal', function () { $(this).find('.modal-body').css({ width:'auto', //probably not needed height:'auto', //probably not needed 'max-height':'100%' }); }); </code></pre> <p>For older versions of bootstrap use <code>show</code></p> <pre><code>$('#modal').on('show', function () { $(this).find('.modal-body').css({ width:'auto', //probably not needed height:'auto', //probably not needed 'max-height':'100%' }); }); </code></pre> <p>or use a css rule to override:</p> <pre><code>.autoModal.modal .modal-body{ max-height: 100%; } </code></pre> <p>and add this class <code>autoModal</code> to your target modals.</p> <p>Change the content dynamically in the fiddle, you will see the modal getting resized accordingly. <kbd><a href="http://jsfiddle.net/GDVdN/" rel="noreferrer">Demo</a></kbd></p> <p>Newer version of bootstrap see the available <a href="http://getbootstrap.com/javascript/#modals-events" rel="noreferrer"><code>event names</code></a>.</p> <ul> <li><strong>show.bs.modal</strong> 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.</li> <li><strong>shown.bs.modal</strong> 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.</li> <li><strong>hide.bs.modal</strong> This event is fired immediately when the hide instance method has been called.</li> <li><strong>hidden.bs.modal</strong> This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</li> <li><strong>loaded.bs.modal</strong> This event is fired when the modal has loaded content using the remote option.</li> </ul> <p>Older version of bootstrap <kbd><a href="http://twitter.github.io/bootstrap/javascript.html#modals" rel="noreferrer">modal events</a> </kbd> supported.</p> <ul> <li><strong>Show</strong> - This event fires immediately when the show instance method is called.</li> <li><strong>shown</strong> - This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).</li> <li><strong>hide</strong> - This event is fired immediately when the hide instance method has been called.</li> <li><strong>hidden</strong> - This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).</li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload