Reduce bootstrap time picker size

Question

How do I reduce the bootstrap timepicker size?

I have used bootstrap timepicker in my project, but the default size was too big. I want to remove extra padding and margin. I am unable to see its css in inspect element or in fire-bug because the widget disappeared when it lost the focus.

Solution 1

Ok, I found how to reduce size of bootstrap date time picker. Here #datetimepicker2 is parent div id of my date time-picker. so please change according to your structure.

#datetimepicker2  .timepicker-picker  table td  a span,
#datetimepicker2  .timepicker-picker  table td,
#datetimepicker2  .timepicker-picker  table td  span
{height: 30px !important;line-height: 30px !important;width: 30px !important; line-height:30px !important; padding:0px !important;}

Solution 2

Initialize the datetimepicker in debug mode

$('#datetimepicker1').datetimepicker(
{
    format: 'MM/DD/YYYY',
    debug: true
});

And then you will be able to inspect the container and apply a class to change the size. In my case worked only removing the "width" property.

css:
#MainCalendarDatePickerContainer .bootstrap-datetimepicker-widget {
    width: unset;
}

Solution 3

You can put the following code in your css theme file to change the sizes for all of the timepickers in your project:

.bootstrap-datetimepicker-widget.timepicker-picker table td,
.bootstrap-datetimepicker-widget.timepicker-picker table td span,
.bootstrap-datetimepicker-widget.timepicker-picker table td a span
{height: 30px; line-height: 30px; width: 30px; padding:0px;}

These settings will change the sizes of the elements inside the widget container as well as the height of the container itself.

You can change the width of the widget container with

.bootstrap-datetimepicker-widget.dropdown-menu {width: auto;}

but that tends to affect the other datepicker containers, so you need to set the table width back to the original container width to force the container back to its previous default size:

.bootstrap-datetimepicker-widget .datepicker table {width: 19em;}

(There are probably other tables that will need to be resized, but I haven't researched the ones I don't use.)

An unwanted side-effect: If the widget opens in something like the timepicker-hours table (which is taller than your reduced-height timepicker-picker table) and the height of the timepicker-hours container forces it to be rendered above the input box rather than below, the js script calculates the location of the upper-left corner of the widget container based on the larger table. Then, when you toggle back to the shorter timepicker-hours table, the widget container doesn't get relocated, so the timepicker-picker table appears to be floating, disconnected, away from the input box.

Solution 4

With help of the above answers and some slight customization I resized the control to apear as on the image below :

   .bootstrap-datetimepicker-widget.dropdown-menu {
        width: auto;
    }

    .timepicker-picker table td a span,
    .timepicker-picker table td,
    .timepicker-picker table td span {
        height: 20px !important;
        line-height: 20px !important;
        vertical-align: middle;
        width: 30px !important;
        padding: 0px !important;
    }

View more solutions