Bootstrap datetimepicker strange positioning on a different div altogether

Question

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({
                format: 'HH:mm'
            });
}

I call this function in document.ready like so:

$(document).ready(function(){
   setTimepicker(starttimefield);
   setTimepicker(endtimefield);
});

The html I am using is like this:

<div class="panel-body">
    <form id="myform">
         <p> <b>Create a New Event:</b></p>                                      
         <br>
         <p>Description for main page: <br>
            <textarea id="summary" name="summary" maxlength="100"></textarea>
         </p>
         <p> Full description: <br>
            <textarea id="description" name="description" maxlength="500"></textarea>
         </p>
         <div class="wrapper">
             <div class="titles">
                 <p> Event date:  
                 </p>
                 <p> Start time:                                         
                 </p>                                        
                 <p> End time:    
                 </p>
                 </div>
                 <div class="values">
                     <input type="text" id="eventdate" readonly/><br>
                     <div id="starttimepicker">
                         <input type="text" id="starttime" onkeydown="return false"/><br>
                     </div>
                     <div id="endttimepicker">
                         <input type="text" id="endtime" onkeydown="return false"/>                                            
                     </div>
                 </div>
            </div>
            <p> Location: <input type="text" id="location"/> </p>

            <p><input type="hidden" id="userid" value="<?php echo Auth::id();?>"/></p>
            <p><input id="saveevent" type="button" value="Save Event" />
                                        </p>
     </form>
</div>

Except for the standard css files (jquery-ui.css, bootstrap-datetimepicker.css) I added 1 extra css file that contains:

.wrapper {
    display: inline-block;
    width: auto;
    overflow: hidden;
}
.titles {
    width: 100px;
    float:left;
}
.values {
    overflow: hidden;
    margin-left: 100px;
}

Now for the issue at hand, the fields endtime and starttime should have a timepicker when clicked (this works) but look at where it renders the timepicker in this image:

Can anyone help me to get that timepicker element next to (or above or close by, anything) the field that it belongs to

Answer 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;
}