顯示內聯不起作用

我正在嘗試將ngTimepicker與我的角度項目集成。它可以工作，但我不能用表單輸入內聯ngTimepicker輸入。 check plunker here 顯示內聯不起作用

我想這部分的html在一行。

的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>

來源

2016-07-01 Invictus

您需要將display inline-block設置爲您的ng-timepicker指令。因爲它會用模板取代自己。

所以你需要寫一個css like that;

ng-timepicker { 
    display: inline-block; 
}

來源

2016-07-01 07:10:41

<!DOCTYPE html> 
<html ng-app="app"> 
<head> 
<title>ngTimepicker</title> 
    </head> 
    <body ng-controller="Ctrl as ctrl"> 

<ng-timepicker ng-model="ctrl.time"></ng-timepicker> 
{{ ctrl.time }} 

<ng-timepicker ng-model="ctrl.time2" theme="red" show-meridian="true"> </ng-timepicker> 
{{ ctrl.time2 }} 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
<script type="text/javascript" src="src/js/ngTimepicker.min.js"></script> 
<script type="text/javascript"> 
var app = angular.module('app', ['jkuri.timepicker']); 
app.controller('Ctrl', [function() { 

}]); 
</script> 
</body> 
</html>

嘗試是這樣的

來源

2016-07-01 07:08:31

試試這個：

CSS

ng-timepicker div { 
    display: inline-block; 
}

更新plnkr

來源

2016-07-01 07:09:21 Arg0n

下面是根據你的代碼工作的例子：plunker

我基本上改變了CSS類：

.inline { 
    display: inline-block; 
}

，並把階級在ngTimepicker指令：

<form> 
    <input class="inline" type="text " required="true" ng-model="ctrl.taskObj.condition"> 
    <ng-timepicker class="inline" ng-model="ctrl.taskObj.timeStart" step="30" theme="green"></ng-timepicker> 
    <ng-timepicker class="inline" 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>

來源

2016-07-01 07:11:16

顯示內聯不起作用

回答

相關問題