Search code examples
simplemodal

SimpleModal autoresize not enitrely correct

With the following HTML and JS:

<div id="dialog" style="display:none;">
    <div class="dialog-title">Dialog Title</div>
    Some text
    <div class="dialog-buttons">
        <button class="uk-button">Button 1</button>
        <button class="uk-button">Button 2</button>
    </div>
</div>
<button onClick="$('#dialog').modal();">open dialog</button>

I get a simplemodal that is not big enough for the contents, with styled buttons using UI-Kit (http://getuikit.com/). The buttons are too wide so are wrapped, making the second button appear outside of the modal.

Any ideas how to get the simplemodal sized correctly?

Thanks!

Solution

  • I've not got the perfect answer but I do have a working answer, adjust the css.

    /* Container */
#simplemodal-container {
  height:auto !important;
  width:600px;
  ...
  }