Question

I am having a problem setting the height attribute for the content within a modal window.

I want the content within the modal window to be 100%, but the problem is that it is only going as high as about 30%. Why is this happening and how can I get the content within the modal window be able to fill the modal window, and not fill about 30% and thus enabling a scroll bar?

Below is the width of the modal window which is fine:

#simplemodal-container {height:75%; width:50%;}

Below is the height and width of the iframe:

$.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');

And finally below is the content going into the modal window (I did set this height to 100% but then I could not get it to work so it currently has no height property:

<div id="previouslink">
<button type="button" id="close" onclick="return parent.closewindow();">Close</button>
<h1>PREVIOUS QUESTIONS</h1>

<p>Search for a previous question by entering in a phrase in the search box below and submitting the phrase</p>

<form action="previousquestions.php" method="post" id="modalform">
      <p>Search: <input type="text" name="questioncontent" value="<?php echo $questioncontent; ?>" /></p>
      <p><input id="searchquestion" name="searchQuestion" type="submit" value="Search" /></p>
      </form>

</div>

You can view the modal window by accessing this link and then clicking on the plus button.

Thank you

Answer 1

Add this style:

#simplemodal-data {height: 100%}