search

tempusdominus / bootstrap-4

Tempus Dominus Bootstrap 4 Datetime Picker
https://getdatepicker.com/5-4/
MIT License
609 stars 238 forks source link

Bootstrap 4 'table' class makes AM/PM button out of the calendar window #157

Open mesameen opened 6 years ago

mesameen commented 6 years ago

Bootstrap 4 'table' class makes AM/PM button out of the calendar window, could you help me to figure it the issue. Please see the running example at codepen Eg: table.table.table-hover tbody tr.row td.col-6 input.form-control.datetimepicker-input.someclass#date1(data-toggle="datetimepicker" data-target="#date1")

Bialogs commented 5 years ago

I too was seeing this behavior, but I think a recent update may have fixed this.

schveiguy commented 5 years ago

FYI, I still see this behavior. I've managed to pull the "AM/PM" button back into the dialog, and remove the striping with this css:

table.table table.table-condensed td {
    padding: 0;
}

table.table-striped tbody div.bootstrap-datetimepicker-widget table tr:nth-of-type(odd) {
    background: transparent;
}

The CSS makes the layout not look as pretty, and there's still borders (I don't know where those are coming from), but the padding 0 is not correct either (it looks a little off). At least it's better than the current status quo.

snyke7 commented 4 years ago

I believe adding this makes the timepicker look as it should:

table.table .timepicker-picker table.table-condensed td {
    padding: 1px;
    border-top: 0;
}

By specifying table.table twice it does not affect styling on other table elements, just the table inside the timepicker, inside another table. The padding on the timepicker td when not in a table turns out to be 1px.