Bootstrap-datetimepicker - Dynamically Add Shows Up In Wrong Area

So after writing to the DB through ajax. my success function. builds an element and appends it to the table. Then after it appends it to the table it calls a datetimepicker on that

Solution 1:

So I do not know the exact fact. It could be one of the 2 possible reasons.

1. datetimepicker - requires a div wrapper for the target relative positioning
2. datetimepicker - requires an input-group div wrapper for the target relative positioning

Either way. I used the following code from their site.

<divclass='input-group date'id='datetimepicker1'><inputtype='text'class="form-control" /><spanclass="input-group-addon"><spanclass="glyphicon glyphicon-calendar"></span></span></div>

Once I did this. And moved the datepicker from targeting the input directly to targeting the group around it (the div) it worked in it's relative positioning perfectly.