I'm facing an issue with my modal form setup where if a text-field is left blank, a label saying "it is required" is generated below the field, causing the "Proceed" button to move (along with all other elements below it). How can I make sure that DOM reserves space for these labels while using ng-if in AngularJS?
Check out the visual representation of my question in the image linked belowhttps://i.sstatic.net/wqCgM.jpg
Here's the code snippet:
<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>