Date picker not aligned when there is fixed top menu on page in bootstrap.

When there is a fixed top menu on page in bootstrap we have to add some element with margin top or to add margin to body.

In that case the datepicker is out of input element basically it is shown over input element because it calculates element style top in my case 50px less.

So for example if i open datepicker and inspect with div with datepicker class i see

element.style {
    display: block;
    left: 1261.5px;
    top: 176.8px;
}

If i edit that and add 50px, the datepicker shows in place. I can add margin-top: 50px to datepicker class and it would work but that is just quick fix for my specific case.

[raefa]

This is not a solution … rather a work around. Calculate the height of the menu at the top and add it to the datepicker on “show”.

$(".date input").datepicker().on("show", function(e) {
var top = $("#organization-header").height() + parseInt($(".datepicker").css("top"));
  $(".datepicker").css("top", top);
});

[PeterSawyer]

Yep @fernandowalla is correct, for some reason my body had margin-top instead of padding-top for my fixed nav.

Fixed with this: -

body { padding-top: 60px; }