Enhancing the functionality of angular-messages is impacting the overall design of

Question

Enhancing the functionality of angular-messages is impacting the overall design of

Displaying here is the current state of my login form:

https://i.sstatic.net/EMcjF.png

However, subsequent to upgrading angular-message to version 1.4 and higher, the layout transforms into this:

https://i.sstatic.net/vVBHf.png

Sharing my source code for reference:

<ion-view view-title="Login">
    <ion-header-bar class="bar-calm">
      <h1 class="title">Login</h1>
    </ion-header-bar>

    <ion-content class="padding">
        <form name="signinForm" novalidate="">
            <div style="line-height: 250px; background-color: rgb(255, 255, 255); border: 1px solid rgb(238, 238, 238); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; text-align: center; width: 100%; height: auto;">
                <i class="icon ion-image" style="font-size: 64px; color: rgb(136, 136, 136); vertical-align: middle;"></i>
            </div>
            <div class="list">
                <label class="item item-input"
                    ng-class="{'has-error' : signinForm.email.$invalid && signinForm.email.$dirty,
                    'valid-lr' : signinForm.email.$valid  && signinForm.email.$dirty}">
                    <span class="input-label">Email</span>
                    <input type="email" 
                        name="email"
                        placeholder="Email" 
                        ng-model="data.email" 
                        required>
                </label>
                <div class="form-errors" 
                  ng-show="signinForm.email.$error && signinForm.email.$dirty"
                  ng-messages="signinForm.email.$error" 
                  ng-messages-include="templates/form-errors.html">
                </div> 

                <label class="item item-input"
                    ng-class="{'has-error-lr' : signinForm.password.$invalid  && signinForm.$submitted, 'valid-lr' : signinForm.password.$valid  && signinForm.$submitted}">
                    <span class="input-label">Password</span>
                    <input type="password" 
                        name="password"
                        placeholder="Password" 
                        ng-model="data.password"
                        ng-minlength="5">
                </label>
                <div class="form-errors" 
                   ng-show="signinForm.password.$error && signinForm.password.$dirty"
                   ng-messages="signinForm.password.$error"
                   ng-messages-include="templates/form-errors.html">
                </div>

            </div>
            <div class="spacer" style="height: 0px;"></div>
            <button class="button button-calm button-block icon-left ion-android-social-user" ng-click="login()" ng-disabled="signinForm.$invalid">Login</button>
            <a href="#/signup" class="button button-positive button-clear button-block ">Not a memeber? Create an account</a>
       </form>
    </ion-content>
</ion-view>

What might be triggering this change in layout? Seeking advice or suggestions. Thanks.

css angularjs ionic-framework upgrade ng-messages

Answer 1

Answer №1

In order for the ng-message directive to function properly, it should be nested within the ng-messages directive. Otherwise, it may not work as expected on the same element. The Angular version used does not impact the functionality after 1.2.18+. An example is provided below:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.js"></script>

<script>
  angular.module('foo', ['ngMessages']);
</script>

<script>
function bop(model, view)
 {
 var i = 0, len = 100000, buz = "";
 
 for (i; i < len; i++)
   {
   buz = buz.concat(i);
   }
  
 bop.cache.put('listContent', buz);
 view.loaded = true;
   
 return model;
 }

 function baz($templateCache)
   {
   bop.cache = $templateCache;
   
   return bop;
   }

 baz.$inject = ['$templateCache','$rootScope'];

 angular.module('foo').filter('baz', baz);
</script>

<div ng-app="foo">
  <form name="myForm">
  <label>Check Me<input type="checkbox" ng-model="$root['required']"></label>
  <div ng-include="'listContent' | baz:myForm"></div>
  <div ng-messages="$root" style="color:green" role="alert">
    <div ng-message="required">👯</div>
  </div>
  <div ng-messages="myForm">
    <div ng-message="loaded" style="color:blue">Loaded</div>
  </div>
    
</div>

compared to:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.js"></script>

<script>
  angular.module('foo', ['ngMessages']);
</script>

<script>
function bop(model, view)
 {
 var i = 0, len = 100000, buz = "";
 
 for (i; i < len; i++)
   {
   buz = buz.concat(i);
   }
  
 bop.cache.put('listContent', buz);
 view.loaded = true;
   
 return model;
 }

 function baz($templateCache)
   {
   bop.cache = $templateCache;
   
   return bop;
   }

 baz.$inject = ['$templateCache','$rootScope'];

 angular.module('foo').filter('baz', baz);
</script>

<div ng-app="foo">
  <form name="myForm">
  <label>Check Me<input type="checkbox" ng-model="$root['required']"></label>
  <div ng-include="'listContent' | baz:myForm"></div>
  <div ng-messages="$root" style="color:green" role="alert">
    <div ng-message="required">👯</div>
  </div>
  <div ng-messages="myForm">
    <div ng-message="loaded" style="color:blue">Loaded</div>
  </div>
    
</div>

References

Answer 2

In order for the ng-message directive to function properly, it should be nested within the ng-messages directive. Otherwise, it may not work as expected on the same element. The Angular version used does not impact the functionality after 1.2.18+. An example is provided below:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.js"></script>

<script>
  angular.module('foo', ['ngMessages']);
</script>

<script>
function bop(model, view)
 {
 var i = 0, len = 100000, buz = "";
 
 for (i; i < len; i++)
   {
   buz = buz.concat(i);
   }
  
 bop.cache.put('listContent', buz);
 view.loaded = true;
   
 return model;
 }

 function baz($templateCache)
   {
   bop.cache = $templateCache;
   
   return bop;
   }

 baz.$inject = ['$templateCache','$rootScope'];

 angular.module('foo').filter('baz', baz);
</script>

<div ng-app="foo">
  <form name="myForm">
  <label>Check Me<input type="checkbox" ng-model="$root['required']"></label>
  <div ng-include="'listContent' | baz:myForm"></div>
  <div ng-messages="$root" style="color:green" role="alert">
    <div ng-message="required">👯</div>
  </div>
  <div ng-messages="myForm">
    <div ng-message="loaded" style="color:blue">Loaded</div>
  </div>
    
</div>

compared to:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.js"></script>

<script>
  angular.module('foo', ['ngMessages']);
</script>

<script>
function bop(model, view)
 {
 var i = 0, len = 100000, buz = "";
 
 for (i; i < len; i++)
   {
   buz = buz.concat(i);
   }
  
 bop.cache.put('listContent', buz);
 view.loaded = true;
   
 return model;
 }

 function baz($templateCache)
   {
   bop.cache = $templateCache;
   
   return bop;
   }

 baz.$inject = ['$templateCache','$rootScope'];

 angular.module('foo').filter('baz', baz);
</script>

<div ng-app="foo">
  <form name="myForm">
  <label>Check Me<input type="checkbox" ng-model="$root['required']"></label>
  <div ng-include="'listContent' | baz:myForm"></div>
  <div ng-messages="$root" style="color:green" role="alert">
    <div ng-message="required">👯</div>
  </div>
  <div ng-messages="myForm">
    <div ng-message="loaded" style="color:blue">Loaded</div>
  </div>
    
</div>

References

Enhancing the functionality of angular-messages is impacting the overall design of

Answer №1

Similar questions

How can I turn off Angular Grid's virtualization feature, where Angular generates div elements for the grid based on height and width positions?

Connect two radio buttons across separate forms

Proper positioning of popover ensures it does not exceed the boundaries of its parent

AngularJS - Issue with ng-mouseover not triggering controller function

What are the steps to incorporate Redux into an Angular 9 application?

Tips for displaying a refresh indicator while making an ajax call for refreshing data:

Could you please explain the mysterious space that appeared between padding-bottom and border-bottom?

Creating a progress bar with a circular indicator at the completion point

AuthGuard in Ionic 4 causing delay in page routing permissions

Navigating with Angular Material and md-nav-bar for efficient routing

Using Bootstrap to create a floating image amidst surrounding elements

Tips on adjusting a position that shifts with changes in window size

Guide to setting up a node.js server that serves HTML files with CSS styling

By utilizing the <tr> element, one can enhance the border thickness by 1 pixel

What is the default delay when utilizing the $timeout function in AngularJS?

What is the functionality of CSS radio tabs?

Guide on aligning svg and button horizontally while maintaining vertical alignment

Click to reveal additional images once the "show more" button is pressed

Modify the parent div's style if there are more than two children present (CSS exclusive)

Challenges with Table and <p> Spacing in HTML and CSS