Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Datepicker top vertical position

See original GitHub issue

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.

Issue Analytics

State:
Created 8 years ago
Comments:20 (6 by maintainers)

Top GitHub Comments

5reactions

StrongLuckycommented, Jun 15, 2016

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 😉

5reactions

nakazyecommented, May 5, 2016

This issue resolved with below PR In my environment. Can you merge this PR? https://github.com/eternicode/bootstrap-datepicker/pull/1371

Top Results From Across the Web

How to change the pop-up position of the jQuery DatePicker ...

Good trick. Problem is that in cases where the datepicker is shown beyond screen borders, the _showDatepicker will try to relocate it, therefore,...

Options — bootstrap-datepicker documentation - Read the Docs

“auto” triggers “smart orientation” of the picker. Horizontal orientation will default to “left” and left offset will be tweaked to keep the picker...

Vertical Alignment of Dropdown list & Date/Time pickers - Telerik

Hi Vivek, You can apply a vertical-align style (e.g. "middle") to the Add button and the regular textboxes in order to achieve better...

Date Picker - Digital Guidelines

vertical -position, string. Determines if the date picker is rendered above or below the input. Possible values: "top" , "bottom" Defaults to "bottom"...

Bootstrap Vertical alignment - examples & tutorial

Bootstrap 5 vertical alignment utilities position elements on the y-axis. You can center your content with it or align it to the top...