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.
My question visually is shown in below image
code is as follows:
<div class="col-md-5">
<input type="text" name="userFirstName" ng-model="registerAppCtrl.registerAppDetails.user.fn" id="reg-fname" class="form-control" tabindex="1" placeholder="First Name" autofocus required/>
<div class="error-help">
<p ng-if="customerDetailsForm.userFirstName.$invalid && !customerDetailsForm.userFirstName.$pristine">First name is required</p>
</div>
<input type="email" name="userEmailId" ng-model="registerAppCtrl.registerAppDetails.user.email" id="reg-email" class="form-control" tabindex="3" placeholder="E-mail ID" required/>
<div class="error-help">
<p ng-if="customerDetailsForm.userEmailId.$error.required && !customerDetailsForm.userEmailId.$pristine">Email ID is required</p>
<p ng-if="customerDetailsForm.userEmailId.$dirty && customerDetailsForm.userEmailId.$error.email" ng-hide="customerDetailsForm.userEmailId.$pristine">Email ID is invalid</p>
</div>
<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/>
<span id="uname-check" style="opacity: 0;"><i class="fa"></i><i id="avail-message"></i></span>
</div>
<div class="col-md-5 col-md-offset-1">
<input type="text" name="userLastName" ng-model="registerAppCtrl.registerAppDetails.user.ln" id="reg-lname" class="form-control" tabindex="2" placeholder="Last Name" required/>
<div class="error-help">
<p ng-if="customerDetailsForm.userLastName.$invalid && !customerDetailsForm.userLastName.$pristine">Last name is required</p>
</div>
<input type="number" name="userPhoneNo" ng-model="registerAppCtrl.registerAppDetails.user.phone" id="reg-phone" class="form-control" tabindex="4" placeholder="Phone" required/>
<div class="error-help">
<p ng-if="customerDetailsForm.userPhoneNo.$invalid && !customerDetailsForm.userPhoneNo.$pristine">Phone number is required</p>
</div>
<input type="password" name="userPassword" ng-model="registerAppCtrl.registerAppDetails.user.pass" id="reg-pwd" class="form-control" tabindex="6" placeholder="Password" required/>
<div class="error-help">
<p ng-if="customerDetailsForm.userPassword.$invalid && !customerDetailsForm.userPassword.$pristine">Password is required</p>
</div>
</div>
<div class="col-md-12">
<button class="btn btn-proceed1" tabindex="7" ng-disabled="customerDetailsForm.$invalid" ng-click="registerAppCtrl.fadeProceed('tab1', 'tab2');" style="position: fixed;" >Proceed</button>
</div>