how to re size the simple modal dialog

Question

I am trying to make the ericmmartin simplemodal dialog wider and taller. My requirement is that the dialog will display scroll bars if the content is long, which it does using the out of the box settings.

If I alter the css example given : #simplemodal-container {height:360px; width:600px; to say width:700px; the content just overflows the dialog downwards.

If I try setting the width in the on click call, as in Eric's examples: $("#sample").modal({ minHeight:400, minWidth: 600 });

(http://www.ericmmartin.com/projects/simplemodal/) nothing changes. Any ideas please? Ideally I wouls like the modal to always present a vertical scroll bar if the content is longer than say 500px.

score 1 · Answer 1 · answered Jul 26 '13 at 14:43

Style and size the modal container however you wish via a CSS. Then when you instantiate the modal dialog via jQuery, dynamically handle the size of the dialog using the 'auto' size options.

In my case, we have more than one modal dialog that can appear on the same page. Since the SimpleModal dialog will enclose the modal container, applying width and height to the simplemodal-container class in an across-the-board manner wasn't feasible.

This is sample markup I just worked on.

<div id="accountCanceled" class="simplemodal-container">
    <div id="cancelWrap" class="box">
        <!-- Modal dialog markup goes here, all styled by an external CSS. -->
    </div>
</div>

This is part of the CSS to set the width of the #cancelWrap div shown above.

#cancelWrap {
    width: 100%;
    max-width: 560px;
}

And here is the relevant jQuery.

  $canceledAlert = $('#accountCanceled');
  $canceledAlert.modal(
     {  containerCss: {
           height: 'auto',
           width: 'auto',
        }
     }
  );

Remember to enclose the 'auto' settings in quotes.

When this SimpleModal dialog is displayed, it's container will dynamically resize to the fit the contents of the #cancelWrap div. Hope this helps someone.

Very good solution! Worked very good, it got some issues with position the modal and having dynamic width. This really is perfect! — Rotan075, Aug 28 '15 at 11:56

TRR · Accepted Answer · 2012-05-21T10:23:00.227

0

set the modal height and width to auto so that the modal doesn't display scroll bars and automatically gets resized according to the content in it.

EDIT

Let the modal have a fixed height and a set the css property of overflow:scroll

edited May 21 '12 at 10:23

answered May 21 '12 at 10:00

TRR

1,637
2
26
43

Thanks, but I really want to define the width and height of the dialog and if the content requires more vertical space it will display scroll bar. – Richard May 21 '12 at 10:03
Thanks but that adds a scroll bar to the whole simple modal container, so the wee close icon is cut in half and scrolls out of view too. I am trying to get the content to scroll inside the fixed hieght modal box. – Richard May 21 '12 at 14:00
did you set the `overflow: scroll` to the `#simplemodal-container` ?? – TRR May 22 '12 at 14:40
1

Yup seems to fix it. Thanks for your kind help. Always good to know one is not alone :-) – Richard May 23 '12 at 15:39

how to re size the simple modal dialog

2 Answers2