CODEWITHSUNDEEP
twitter-bootstrapangular-ui-bootstrap
go_dores
go_dores

Reputation: 83

Angular UI Timepicker vertical alignment

I am using the timepicker control from Angular UI - Bootstrap and I can't figure out how to center it vertically. It is basically 3 times as tall as other controls, and by default the label/etc. seems to align with the ^'s above the time input boxes.

I'd like to figure out how to center it vertically, or shrink it vertically so it is the same size as a regular input box.

I know that the form-control class would align it vertically, but adding that does funky things. An input box renders with the right dimensions, but the timepicker still renders as always (vertically off center) over the top of the input.

Alternatively, can someone recommend a straightforward way to solicit the input of a date and time using Angular.js and Bootstrap?

My markup is below:

<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

Upvotes: 7

Views: 1953

Answers (1)

bjc
bjc

Reputation: 103

timepicker is actually a table which contains 3 rows. (Please refer to the source code: timepicker.html)

That's why it occupies 3 times of height more than other controlls. A simple, but maybe not very elegant solution is put it in another table.

<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

Upvotes: 1

Related Questions