Bootstrap-datepicker: body margins affects positioning

Created on 8 Jul 2016 · 5Comments · Source: uxsolutions/bootstrap-datepicker

Expected behavior

To be displayed properly.

Actual behavior

The calendar is shown with its position affects by the margins of the body element.
I've added via DevTools margins to the body on the sandbox site and it manifested the same behavior.

Datepicker version used

1.6.1.

Example code

Add margin-top and margin left with positive and negative values and see.

Here's the fiddle :)

Source

aifrim

👍5

Most helpful comment

Created a quick patch for this issue. After including bootstrap-datepicker add this code:

<script>
    // This wrapper fixes wrong placement of picker when container has margins.
    var originaldatepicker = $.fn.datepicker;

    $.fn.datepicker = function () {
        var result = originaldatepicker.apply(this, arguments);

        this.on('show', function (e) {
            var $target = $(this),
                $picker = $target.data('datepicker').picker,
                top;

            if ($picker.hasClass('datepicker-orient-top')) {
                top = $target.offset().top - $picker.outerHeight() - parseInt($picker.css('marginTop'));
            } else {
                top = $target.offset().top + $target.outerHeight() + parseInt($picker.css('marginTop'));
            }

            $picker.offset({top: top});
        });

        return result;
    }
</script>

Generally it repositions picker whenever it is shown. Works for version 1.6.4.
Hope sb will find it useful, and the original code will be fixed soon!

imbrish on 31 Mar 2017

👍9 ❤1

All 5 comments

Created a quick patch for this issue. After including bootstrap-datepicker add this code:

<script>
    // This wrapper fixes wrong placement of picker when container has margins.
    var originaldatepicker = $.fn.datepicker;

    $.fn.datepicker = function () {
        var result = originaldatepicker.apply(this, arguments);

        this.on('show', function (e) {
            var $target = $(this),
                $picker = $target.data('datepicker').picker,
                top;

            if ($picker.hasClass('datepicker-orient-top')) {
                top = $target.offset().top - $picker.outerHeight() - parseInt($picker.css('marginTop'));
            } else {
                top = $target.offset().top + $target.outerHeight() + parseInt($picker.css('marginTop'));
            }

            $picker.offset({top: top});
        });

        return result;
    }
</script>

Generally it repositions picker whenever it is shown. Works for version 1.6.4.
Hope sb will find it useful, and the original code will be fixed soon!

imbrish on 31 Mar 2017

👍9 ❤1

this solved my problem, thanks!!