CODEWITHSUNDEEP
angularjsangular-ui-bootstrapangular-ui
ps0604
ps0604

Reputation: 1071

Angular UI date picker error message in same line

In this plunk I have an Angular UI date picker with an error message that is displayed when the date is invalid. Problem is that the error message is shown below the date instead of the same line. How to fix this?

HTML

  <form name="form1" ng-submit="validate(form1)" novalidate>
      <p class="input-group" style="width:160px;margin-bottom:0px;">
          <input type="text" class="form-control" ng-model="dtFrom" 
               is-open="config1.opened"  uib-datepicker-popup="MM-dd-yyyy" 
               close-text="Close" name="dtFrom" />
           <span class="input-group-btn">
               <button type="button" class="btn btn-default" ng-click="open1($event)">
                  <i class="glyphicon glyphicon-calendar"></i>
               </button>
           </span>
      </p>
      <div style="background-color:red;color:white;width:150px"
          ng-show="!form1.dtFrom.$valid">Invalid Date</div>
  </form>

Javascript

var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);

app.controller('ctl', function ($scope) {

    $scope.dtFrom = new Date ();

    $scope.config1 = {};
    $scope.config1.opened = false;
    $scope.open1 = function(event){
         event.preventDefault();
         event.stopPropagation();
         $scope.config1.opened = true;
    };

});

Upvotes: 0

Views: 786

Answers (2)

Sasang
Sasang

Reputation: 1281

The reason you are seeing this misalignment is because you are using bootstrap classes but are not correctly applying them to all the corresponding elements. When you use an input-group as you've applied to the <p> element, you are using a specific bootstrap class that adds styling to the components, like display:table. To have a correct behavior for the whole form, you need to keep using these classes on sibling elements. Namely input-group and form-control. Using these you will notice that its better aligned to its neighbor in both position and height. Additionally its best to wrap all these components in a valid row and column classes for parent elements. I've added an updated version of your plnkr showing how these changes behave:

plnkr

Upvotes: 1

Akashii
Akashii

Reputation: 2281

You can add class list-inline in it. Here is plnkr

http://plnkr.co/edit/23CxCMDRK6DBiW115K7T?p=preview

Upvotes: 1

Related Questions