Unable set Modaal width or height

[suyashbansal]

I am not able to set width or height of the modal by both default as well as inline attribute method. I tried this:
<script type="text/javascript"> $('.modaal-inline').modaal({ type: 'inline', accessible_title: 'Modal title', width: '400', height: '200' }); </script>
and also this
<a href="#inline-content" data-modaal-type="inline" data-modaal-width="200px" data-modaal-accessible-title="Inline Dialog Window" data-modaal-overlay-opacity="0.4" class="modaal">Show Modaal</a>

Am I doing it wrong?

[cbotman]

Hey @suyashbansal, it looks like the width and height properties only affect iframe modals, at the moment.

@danhumaan This looks like a bug to me, or is the intent that you use CSS to control the modal content, including its dimensions? In that case, we should update the documentation at least.

[jackbarham]

I've noticed this problem as well - I need to be able to set the width of all all modals, but this is not working:

$('.modal-show-alert').modaal({
    type: 'confirm',
    width: 480
});

[cbotman]

Hi @suyashbansal and @jackbarham, until @danhumaan's has a chance to look at this, you can hopefully achieve what you need with this CSS (just ensure it's applied after modal.css is included).

Just confirmation dialogs:
.modaal-confirm .modaal-container { width: 400px; height: 200px; }

Or all modals:
.modaal-container { width: 480px; }

It looks like in our own projects we've been using CSS to control the modal sizes like that, which is likely how we missed the potential issue setting it via JavaScript.

[danhumaan]

Hi @suyashbansal and @jackbarham, an extension for width and height support has been worked in this morning and will become available in the next milestone release (0.3.0). For the width attribute, this will work as a css max-width so as keep it responsive. Height will work as a fixed height with overflow: auto applied so that any content within will scroll within that space.

For all reading this, width and height options are only applicable to the Inline, Ajax, iFrame and Confirm content types. It makes no sense to support modals that are fullscreen, video, instagram or image types as they are all responsive and designed to fill as much space as the content will allow for.

[danhumaan]

Hi @suyashbansal and @jackbarham, thanks again for your contributions. A fix has been just been rolled out in the latest release for this issue.