twitter-bootstrap – Angular UI Timepicker垂直对齐

发布时间：2020-12-18 00:28:43 所属栏目：安全来源：网络整理

导读：我正在使用Angular UI中的timepicker控件 – Bootstrap,我无法弄清楚如何垂直居中.它基本上是其他控件的3倍,默认情况下是标签/ etc.似乎与时间输入框上方的^对齐. 我想弄清楚如何垂直居中,或垂直收缩它,因此它与常规输入盒的大小相同. 我知道表单控件类会垂

我正在使用Angular UI中的timepicker控件 – Bootstrap,我无法弄清楚如何垂直居中.它基本上是其他控件的3倍,默认情况下是标签/ etc.似乎与时间输入框上方的^对齐.

我想弄清楚如何垂直居中,或垂直收缩它,因此它与常规输入盒的大小相同.

我知道表单控件类会垂直对齐它,但添加它会产生时髦的东西.输入框呈现正确的尺寸,但时间戳仍然在输入顶部始终(垂直偏离中心)渲染.

或者,有人可以推荐一种直接的方式来使用Angular.js和Bootstrap来请求输入日期和时间吗？

我的标记如下：

<div class="panel-body container-fluid">
    <div class="well well-lg container-fluid form-horizontal">
        <div class="form-group">
            <label for="idStartDate" class="col-md-2 control-label">Received After</label>
            <p class="col-md-2 input-group">
                <input type="text" class="form-control" datepicker-popup="MM/dd/yyyy" ng-model="startDate"
                       is-open="startDateOpened" max-date="endDate || today" datepicker-options="dateOptions"
                       placeholder="Received after" id="idStartDate"/>
                <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="openStartDate($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </p>
        </div>
        <div class="form-group">
            <label for="idStartTime" class="col-md-2 control-label">Time</label>
            <div class="col-md-2">
                <timepicker id="idStartTime" ng-model="startTime" minute-step="15"></timepicker>
            </div>
        </div>
    </div>
</div>

jsfiddle

解决方法

timepicker实际上是一个包含3行的表. (请参考源代码： timepicker.html)

这就是为什么它比其他对手高出3倍的高度.
一个简单但可能不是很优雅的解决方案是将它放在另一个表中.

<table style="vertical-align='middle'">
  <tr><td>Time </td>
  <td>
  <timepicker id="idStartTime" ng-model="startTime" minute-step="15"></timepicker>
  </td>
</tr></table>

Try this on jsfiddle

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!