[BUG] Switching to time picker produces unpleasant visual effect on resize

[temuri416]

Hi,

In FF or Chrome:

1. Open http://eonasdan.github.io/bootstrap-datetimepicker/#example1
2. Display the datepicker
3. Click CLOCK icon

You will notice that when animation stops, the bottom suddenly moves up by 15px or so.

Would it be possible to:

1. Have a switch to disable animation, which will make the transition to new height seamless;
2. Adjust the resize when animation is on.

Thanks for the wonderful widget!

[temuri416]

A switch to disable animation would be grand.

[Kenny-Moore]

There appears to be a mistake in a css rule causing this jump in the animation. There is a rule targeting the table cells that contain the time-picker up/down arrow buttons. This rule is supposed to set the padding on these cells to 0px but the rule only targets the buttons when the class "in" is on the time-picker list element which is assigned after the animation completes. Thus during the animation there is extra padding which disappears after the animation is complete.

To fix this the rule needs to be changed from:
.bootstrap-datetimepicker-widget ul.list-unstyled li.in div.timepicker div.timepicker-picker table.table-condensed tbody > tr > td
{
padding: 0px !important;
}

To this:
.bootstrap-datetimepicker-widget ul.list-unstyled li div.timepicker div.timepicker-picker table.table-condensed tbody > tr > td
{
padding: 0px !important;
}

Also, I would like to take this time to point out that table elements should not be used to layout the elements of the time-picker control.

[Eonasdan]

Please check the Staging branch to verify your issue(s) have been resolved.