javascriptjqueryjqmodal

jqModal overflowing my page

I am using jqModal to create a modal window using ajax that contains a form to be filled out. The parent window only contains about half a page of data, so does not contain scroll bars. When the modal window is loaded, the form overflows the page and the bottom part is not visible. What would be the best way to either create a modal window that contains scroll bars when needed or add scroll bars to the parent window so that the entire modal can be scrolled up and down? Code is as follows:

Javascript:

$(document).ready(function () {

    $("#AddGameTypeWindow").jqm({
        ajax: '/maintenance/AddGameType.html',
        modal: true,
        trigger: "#NewGameTypeButton"
    });
});

HTML:

<body>
    <div id="AddGameTypeWindow" title="Add Game Type" style="display:none"></div>
    <div id="AddLocationWindow" class="jqmWindow" style="width:640px;height:480px"></div>
    <table>
        <tr>
            <td>Game Type</td><td><select id="GameType"><option value="0"></option></select>&nbsp;<button id="NewGameTypeButton" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-plus"></span></button></td>
        </tr>
Solution

  • If your modal is <div id="AddGameTypeWindow" title="Add Game Type" style="display:none"></div> try giving it a fixed height and adding overflow:auto to his style so that if the modal content is greater than your fixed height the scrollbars will appear.