Bootstrap Datetimepicker Strange Positioning On A Different Div Altogether

I am using bootstrap datetimepicker with formatting to enable only editing time in my code, I do it like this: function setTimepicker(object){ object.datetimepicker({

Solution 1:

You are missing an .input-group wrapper which has a position value of "relative". Since the datepicker is absolutely positioned it's container needs to be relatively positioned for the datepicker to be positioned correctly.

So I believe something like this would work:

.values {
    position: relative;
    overflow: hidden;
    margin-left: 100px;
}

Better yet, let's set position relative on the divs that actually hold our inputs like so:

#starttimepicker {
  position: relative;
}

#endtimepicker {
  position: relative;
}

If you want my opinion though that is not very DRY. If you have control over the html you might try to add a class of "values__datepicker" (or whatever class) to #starttimepicker and #endtimepicker and set just one CSS rule like so:

.values__datepicker {
  position: relative;
}