Angular UI date picker error message in same line

Question

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;
    };

});

Akashii · Accepted Answer · 2017-05-01 03:15:10Z

1

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

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

answered May 1, 2017 at 3:15

Akashii

2,2815 gold badges19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sasang · Accepted Answer · 2017-05-01 03:41:47Z

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

Collectives™ on Stack Overflow

Angular UI date picker error message in same line

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related