Invictus Invictus - 1 year ago 73
CSS Question

display inline not working

I am trying to integrate ngTimepicker with my angular project. It do work but I cannot inline the ngTimepicker inputs with the form input.
check plunker here

I want this part of html to be in one line.

index.html

<form>
<input type="text " required="true" ng-model="ctrl.taskObj.condition">
<ng-timepicker ng-model="ctrl.taskObj.timeStart" step="30" theme="green"></ng-timepicker>
<ng-timepicker ng-model="ctrl.taskObj.timeEnd" step="30" theme="green"></ng-timepicker>
<button type="button" class="btn btn-primary" ng-click="ctrl.addTask()">Add</button>
</form>

Answer

You need to set display inline-block to your ng-timepicker directives. Because it replaces itself with a template.

So you need to write a css like that;

ng-timepicker {
  display: inline-block;
}