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>	

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>	

• javascript
• jquery
• css
• angularjs

3 Answers 3

You can reserve space by using another <p> element in your case using ng-hide and visibility:hidden; :

<div class="error-help">
    <p ng-if="customerDetailsForm.userPhoneNo.$invalid &&!customerDetailsForm.userPhoneNo.$pristine">Phone number is required</p>

    <p style="visibility:hidden;" ng-hide="customerDetailsForm.userPhoneNo.$invalid &&!customerDetailsForm.userPhoneNo.$pristine" >Phone number is required</p>

</div> 

My suggestion is more of a workaround. You can replace ng-if with ng-class. You can give your errors a class based on your conditions - for example invisible. In the CSS you will define the invisible class as:

.invisible {
    visibility: hidden;
}

managed to do it using [ngStyle]

[ngStyle]="{'visibility': my-flag ? 'visible' : 'hidden'}"