I have a page that is powered by angularjs and performs a specific function.
This function populates a hidden div, which is then displayed to the user.
The issue I'm facing is that when this text is shown, the main div containing my page content doesn't seem to resize properly. As a result, while the footer moves down correctly, it leaves a large amount of unsightly whitespace below, as shown in the images:
Before Function:
https://i.sstatic.net/9m7tc.png
After Function:https://i.sstatic.net/5fguV.png
How can I ensure that the main page content div resizes to fit this new content?
CSS:
* {
margin: 0;
}
#body{
background-color: #EAFFE5;
margin: 0px;
padding: 0px;
font-family: Calibri;
}
.content{
width:85%;
border: 0px solid #000;
margin: 0px auto 0px auto;
clear: both;
text-align: center;
min-height: 700px;
}
.content a:link,
.content a:visited{
color:blue;
}
.display{
width: 90%;
border: 0px solid #000;
margin: 0px auto 0px auto;
clear:both;
text-align: justify;
}
HTML:
<div id="body" ng-controller="recipeSubmitController">
<div class="content">
<title>Submit a recipe</title>
<h3>Recipe Submission</h3>
<div class='display'>
<form name="recipeSubmitForm">
<p>Recipe Title: *</p>
<input type ='text' maxlength="200" id="titleInput" class="forminput" ng-model="titleInput"style="float:left;" placeholder="Paste or write recipe title here." required>
<br>
<br>
<p>Ingredients: *</p>
<textarea rows="5" maxlength="3600" class='formtextarea' ng-model="ingredientsInput" placeholder="Paste or write recipe ingredients here." required></textarea>
<br>
<br>
<p>Instructions: *</p>
<textarea rows="5" maxlength="3600" class='formtextarea' ng-model="instructionsInput" placeholder="Paste or write recipe instructions here." required></textarea>
<br>
<br>
<button id="basicRecipeSubmitButton" class="buttonstyled" style="float:right;" ng-click='basicRecipeSubmitClicked()'>Submit data</button>
<br>
<br>
</form>
<br>
<br>
<div id="recipeMainBody" ng-show="parsedDataShown" ng-cloak="true">
<h4>Here's a sneak peek of how the recipe will look:</h4>
<br>
<h4><span ng-bind="recipeObject.title"></span></h4>
<div id="recipeSideInfo" style="float:left; width:20%; text-align: left;">
<h4>Ingredients:</h4>
<li ng-repeat="ingredients in recipeObject.ingredients | orderBy:'-Amount'">
{{ ingredients.Amount + ' ' + ingredients.Units + ' '+ ingredients.Name}}
</li>
</div>
<div id="recipeInstructions" style="float:right; width:75%">
<h4>Instructions:</h4>
<li ng-repeat="instruction in recipeObject.instructions | orderBy: 'Step'" style="list-style-type: none;">
{{ instruction.Step + '. ' + instruction.Text }}
</li>
</div>
</div>
</div>
</div>