Angular UI Timepicker вертикальное выравнивание

Я использую элемент управления timepicker из Angular UI - Bootstrap, и я не могу понять, как центрировать его по вертикали. Он в основном в 3 раза выше, чем другие элементы управления, и по умолчанию ярлык /etc. похоже, выравнивается с символом ^ над полями ввода времени.

Я хотел бы выяснить, как центрировать его по вертикали или уменьшить его по вертикали, чтобы он был того же размера, что и обычный ящик ввода.

Я знаю, что класс управления формой выравнивал бы его по вертикали, но добавляя, что делает фанковые вещи. Коробка ввода отображается с правильными размерами, но временной указатель по-прежнему отображает, как всегда (вертикально не в центре) над верхней частью ввода.

В качестве альтернативы, может кто-то порекомендовать простой способ запросить ввод даты и времени с помощью Angular.js и Bootstrap?

Моя разметка ниже:

<div>
 <div>
 <div>
 <label for="idStartDate">Received After</label>
 <p>
 
 <span>
 
 </span>
 </p>
 </div>
 <div>
 <label for="idStartTime">Time</label>
 <div>
 
 </div>
 </div>
 </div>
</div>

jsfiddle

1 ответ

timepicker - это таблица , которая содержит 3 строки. (Обратитесь к исходному коду: timepicker.html)

Вот почему он занимает в 3 раза больше высоты, чем другие. Простое, но, может быть, не очень элегантное решение помещено в другую таблицу.

<table style="vertical-align='middle'">
 <tbody><tr><td>Time </td>
 <td>
 
 </td>
</tr></tbody></table>

Попробуйте это на jsfiddle

licensed under cc by-sa 3.0 with attribution.