Bootstrap datetimepicker strange positioning on another div at all
I am using bootstrap datetimepicker with formatting to include only edit time in my code, I do it like this:
function setTimepicker(object){
object.datetimepicker({
format: 'HH:mm'
});
}
I am calling this function on a document. Like this:
$(document).ready(function(){
setTimepicker(starttimefield);
setTimepicker(endtimefield);
});
The html I am using looks 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 have added 1 additional css file which contains:
.wrapper {
display: inline-block;
width: auto;
overflow: hidden;
}
.titles {
width: 100px;
float:left;
}
.values {
overflow: hidden;
margin-left: 100px;
}
Now for this problem, the end time and start time of the fields should be set to timepicker when clicked (this works), but look where it displays the timepicker in this image:
Can anyone help me get this timepicker next to (or above, or close, whatever) the field it belongs to
source to share
You are missing a wrapper .input-group
that has a "relative" position value. Since the datepicker is absolutely positioned, the container must be relatively positioned in order to position the date correctly.
So, I believe that something like this will work:
.values {
position: relative;
overflow: hidden;
margin-left: 100px;
}
Better yet, let's set the relative position relative to the divs that actually store our inputs like this:
#starttimepicker {
position: relative;
}
#endtimepicker {
position: relative;
}
If you want my opinion, although this is not very DRY. If you have control over the html, you can try adding the "values__datepicker" class (or any other class) to #starttimepicker and #endtimepicker and set just one CSS rule like so:
.values__datepicker {
position: relative;
}
source to share