title: make angular ng-if reserve space for showing if event occurs
body: <p>I have a set up in which I am having a modal form for some details to be submitted. But when one of the text-field is put blank - generating a label below the text-field saying "it is required" causes "Proceed" button to move - (Infact all others below it to move). How can make DOM to reserve space for such labels - while I am using ng-if of angularjs. </p>
  
  <p>My question visually is shown in below image<a href="https://i.stack.imgur.com/wqCgM.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wqCgM.jpg" alt="enter image description here"></a></p>
  
  <p>code is as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-md-5"&gt;
      &lt;input type="text" name="userFirstName" ng-model="registerAppCtrl.registerAppDetails.user.fn" id="reg-fname" class="form-control" tabindex="1" placeholder="First Name" autofocus required/&gt; 
      &lt;div class="error-help"&gt;
          &lt;p ng-if="customerDetailsForm.userFirstName.$invalid &amp;&amp; !customerDetailsForm.userFirstName.$pristine"&gt;First name is required&lt;/p&gt;
      &lt;/div&gt;
          
      &lt;input type="email" name="userEmailId" ng-model="registerAppCtrl.registerAppDetails.user.email" id="reg-email" class="form-control" tabindex="3"  placeholder="E-mail ID" required/&gt;
      &lt;div class="error-help"&gt;
          &lt;p ng-if="customerDetailsForm.userEmailId.$error.required &amp;&amp; !customerDetailsForm.userEmailId.$pristine"&gt;Email ID is required&lt;/p&gt;
          &lt;p ng-if="customerDetailsForm.userEmailId.$dirty &amp;&amp; customerDetailsForm.userEmailId.$error.email" ng-hide="customerDetailsForm.userEmailId.$pristine"&gt;Email ID is invalid&lt;/p&gt;
      &lt;/div&gt;
      &lt;input type="text" name="userName" ng-model="registerAppCtrl.registerAppDetails.user.uname" id="reg-uname" class="form-control" tabindex="5"  placeholder="User Name" onkeyup="unameAvailability($(this).val())" required/&gt;
      &lt;span id="uname-check" style="opacity: 0;"&gt;&lt;i class="fa"&gt;&lt;/i&gt;&lt;i id="avail-message"&gt;&lt;/i&gt;&lt;/span&gt;
  &lt;/div&gt;
          
  &lt;div class="col-md-5 col-md-offset-1"&gt;
      &lt;input type="text" name="userLastName" ng-model="registerAppCtrl.registerAppDetails.user.ln" id="reg-lname" class="form-control"  tabindex="2" placeholder="Last Name" required/&gt;
      &lt;div class="error-help"&gt;
          &lt;p ng-if="customerDetailsForm.userLastName.$invalid &amp;&amp; !customerDetailsForm.userLastName.$pristine"&gt;Last name is required&lt;/p&gt;
      &lt;/div&gt; 
  &lt;input type="number" name="userPhoneNo" ng-model="registerAppCtrl.registerAppDetails.user.phone" id="reg-phone" class="form-control" tabindex="4" placeholder="Phone" required/&gt;
  &lt;div class="error-help"&gt;
      &lt;p ng-if="customerDetailsForm.userPhoneNo.$invalid &amp;&amp; !customerDetailsForm.userPhoneNo.$pristine"&gt;Phone number is required&lt;/p&gt;
  &lt;/div&gt; 
          
  &lt;input type="password" name="userPassword" ng-model="registerAppCtrl.registerAppDetails.user.pass" id="reg-pwd" class="form-control" tabindex="6" placeholder="Password" required/&gt;
      &lt;div class="error-help"&gt;
          &lt;p ng-if="customerDetailsForm.userPassword.$invalid &amp;&amp; !customerDetailsForm.userPassword.$pristine"&gt;Password is required&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-md-12"&gt;
      &lt;button class="btn btn-proceed1"  tabindex="7"  ng-disabled="customerDetailsForm.$invalid" ng-click="registerAppCtrl.fadeProceed('tab1', 'tab2');" style="position: fixed;" &gt;Proceed&lt;/button&gt;
  &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>