jqModal overflowing my page

StackOverflow https://stackoverflow.com/questions/17139456

  •  31-05-2022
  •  | 
  •  

Pregunta

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>
¿Fue útil?

Solución

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.

Otros consejos

You have two options to do this. You can either have a fixed width and height and set overflow to auto like already suggested. If you are looking for flexible width you can also do it relative to the size of the window.

<script>
  function getWidth(){
    return $(window).width(); 
  }
</script>

And then you can multiply it to get a percentage when you apply the width:

width: getWidth() * 0.5; // A 50% width
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top