CODEWITHSUNDEEP
jquerysimplemodal
rlcrews
rlcrews

Reputation: 3562

How to re-size SimpleModal Dialog box based upon content rendered

I am working with SimpleModal dialog box and within a page I would like to have the modal dialog box to set the height of the dialog box to present the content without scrollbars.

Within a test page I am using the following code: I inserted a bunch of extra paragraph tags to represent more like a form layout. This dialog box will not need to exceed the height of the screen but I would like for the dialog to expand up to the max height of the screen and then scroll if necessary.

I've tried using maxHeight as an option in the modal window but the css continues to revert to inline fixed height and width within the DOM.

<link href="Styles/basic.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="js/jquery-1.7.js" type="text/javascript" ></script>
    <script src="js/jquery.simplemodal-1.4.2.js" type="text/javascript" ></script>
    <script type="text/javascript">
        $(function () {
            $("#basic-modal").click(function (e) {
                $('#basic-modal-content').modal({ minHeight: 500, minWidth: 400, overlayClose: false});

                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <br />
        <br />
        <asp:TextBox Width="300" BorderColor="Black" BorderWidth="1px" Height="32px" Font-Size="1.1em"
            runat="server" /><br />
        <br />
        <a href="#" id="basic-modal">
            Click to open Modal window</a>
    </div>
    <div id="basic-modal-content">
        <h3>
            Basic Modal Dialog</h3>
        <p>
            For this demo, SimpleModal is using this "hidden" data for its content. You can
            also populate the modal dialog with an AJAX response, standard HTML or DOM element(s).</p>
        <p>
            Examples:</p>
    **... removed for brevity this consisted of additional html content to invoke a scroll**

    </div>

In reading the documentation from Eric Martins site I see reference to the content reverting to overflow.

SimpleModal internally defines the following CSS classes: simplemodal-overlay, simplemodal-container, simplemodal-wrap (SimpleModal will automatically set the overflow to auto if the content gets larger than the container), and simplemodal-data.

And I see within the CSS the following styles:

#simplemodal-overlay {background-color:#000; }

    #simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
    #simplemodal-container .simplemodal-data {padding:8px;}
    #simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
    #simplemodal-container a {color:#ddd;}
    #simplemodal-container a.modalCloseImg {background:url(../img/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
    #simplemodal-container h3 {color:#84b8d9;}

I have been unsuccessful in getting the modal window to expand/scale based upon the content within the basic-modal-content div container above the 400 min height value I currently pass.

Do I need to modify the simple modal js files(this doesn't seem correct) or is there an option that I can pass within the modal function that I am missing.

Update to Question

In working with this further I have been able to over-ride the width and height by using dataCss and containerCss as specified within the simpleModal js file. My call now looks as: 

$(function () {
            $("#basic-modal").click(function (e) {
                $('#basic-modal-content').modal({ dataCss: { height: "95%", width: "95%" }, containerCSS: { height: "95%", width: "95%" }, overlayClose: false });

                return false;
            });
        });

This seems to work or at least accomplish what I was attempting.

However I would appreciate any additional suggestions or direction if there is a better approach

Thank you,

Upvotes: 3

Views: 3186

Answers (1)

kursus
kursus

Reputation: 1404

Just remove any width or height properties (css AND js). This way Simple Modal will perfectly fit to your hidden markup.

Upvotes: 0

Related Questions