Bootstrap-datepicker: Datepicker top vertical position

Created on 9 Apr 2015 · 20Comments · Source: uxsolutions/bootstrap-datepicker

I have this markup:

<div class="col-md-7">
    <input id="date-field1" class="form-control date-picker" type="text" name="in-  place-date" value=""  placeholder="Enter Date">
    <span class="help-block">Selects some date</span>
</div>

So, when i use

widgetPositioning: {
    vertical: 'top'
}

the datepicker is positioned not above the input but somewhere below it, after some research i found out that

widget.css({
    top: vertical === 'top' ? 'auto' : position.top + element.outerHeight(),
    bottom: vertical === 'top' ? position.top + element.outerHeight() : 'auto',
    left: horizontal === 'left' ? parent.css('padding-left') : 'auto',
    right: horizontal === 'left' ? 'auto' : parent.width() - element.outerWidth()
});

this code could ignore help's block height.

Source

smartapant

Most helpful comment

I also had the Problem with wrong offset.

I had margin-top on the body element. On change margin-top to padding-top the datepicker works fine with offset.

Dont like to change the code of a plugin. Maybee the developer should have a look at this problem ;)

StrongLucky on 15 Jun 2016

👍3 ❤2

All 20 comments

I can confirm that the positioning is off since the update to 1.4.0 – see screenshot. With 1.3.1, everything's fine.

screen shot 2015-04-14 at 15 43 20

clemens on 14 Apr 2015

Similarly odd positioning with slightly different settings (the date field is the one with the focus borders).

screen shot 2015-04-14 at 15 46 20

clemens on 14 Apr 2015

My problem on v1.4.0, same on chrome 42, ff, IE 11. :

It misses 20px, exactly the value of appendOffset = $(this.o.container).offset(); that is substracted after

I changed var left = offset.left - appendOffset.left, top = offset.top - appendOffset.top;
To
var left = offset.left, top = offset.top

And hoo magic, it's working

What is this appendOffset = $(this.o.container).offset() exactly ? Why is it substracted to top offset index ?

yoyos on 15 Apr 2015

Same issue as @yoyos here, his PR fixes the issue.

darbula on 20 Jul 2015

seems to be fixed with f08ad04, closing.

hebbet on 13 Sep 2015

I downloaded the most recent copy of 1.5.0 from the site proper. I'm having this issue. Where can I get the version that has it fixed? Pulling from repo?

akluthe on 6 Nov 2015

Commit f08ad04 was included in 1.5.0. IF you still have an problem, please create an issue!

acrobat on 6 Nov 2015

Sure, but is the link to download 1.5.0 located at:

https://github.com/eternicode/bootstrap-datepicker/releases/download/v1.5.0/bootstrap-datepicker-1.5.0-dist.zip

Is this the 1.5.0 that contains the fix? I see stuff in the 1.5.0 branch that was updated only hours ago. I'm a bit confused where to get the proper release.

akluthe on 6 Nov 2015

oh you mean the 1.5 branch, no that version is not yet released (no date yet, but soon). If you want those fixes already you should pull from source!

acrobat on 6 Nov 2015

Gotcha,

This and the included in 1.5.0 made me think I was getting the most current stable release. Pull from 1.5 branch source should fix my positioning issues?

akluthe on 6 Nov 2015

No the commit mentioned above is already included in the 1.5.0 release. The 1.5 branch is the current work on the 1.5.1 bugfix release

But if the commit fixes this issue , it should be fixed in 1.5.0

acrobat on 6 Nov 2015

Ok, ill do some more investigating and open another issue if I can get some more info on the problem. I was just trying to make sure I had the right stuff in hand at the moment before opening another one. There are quite a few CSS files too that I wasn't sure which to use, but I see that's been addressed in another issue as something to be added to the docs in the future.

akluthe on 6 Nov 2015

See also #1662

abeverley on 13 Nov 2015

Definitely has something to do with margins existing in a parent div that the datepicker control is a child of. Like @yoyos, if you get rid of the appendOffset subtraction adjustments to the var left = offset.left and top = offset.top declarations in the javascript, then the offset is no longer an issue. I could see how setting the data-date-container property using the lazy loading data-api correctly could make this thing work without needing to change the JS, but I couldn't figure it out.