Bootstrap Datepicker: Misaligned

Question

Ich versuche, eine bootstrap datepicker für eine Website zu implementieren. Das Problem ist, dass das Kalendermodal fehlausgerichtet wird, da einige der css (auf die ich keinen Zugriff habe) dem Körper einen Rand hinzufügen und das Modal absolut positioniert wird.

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

body { 
 
\t 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 das Problem demonstriert.

Was ist die einfachste Arbeit? Das Hinzufügen eines festen oberen Randes über Javascript würde funktionieren, ist aber unglaublich hacky. Gibt es eine bessere Lösung?

Answer 1

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

, die das Problem beheben sollte, hier ist ein Link zu einer Gabel Ihrer jsfiddle:

https://jsfiddle.net/q0s4Lubb/