nico nico - 4 months ago 20
HTML Question

Bootstrap Datepicker: Misaligned

I'm trying to implement a bootstrap datepicker for a website. The issue is that the calendar modal becomes misaligned since some of the css (which I don't have access to) adds a margin to the body and the modal is positioned absolutely.



$('.input-test').datepicker({});

body {
margin-top: 110px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>

<input class="input-test"></input>





Here is jsfiddle demonstrating the problem.

What's the easiest work around? Adding a fixed top margin through javascript would work but is incredibly hacky. Is there a better solution?

Answer

$('.input-test').datepicker({ container: "html" });

That should fix the issue, here is a link to a fork of your jsfiddle:

https://jsfiddle.net/q0s4Lubb/