Bootstrap-datepicker positioned on the left top corner of the page
<p>I'm using <code>bootstrap-datepicker</code> from <a href="https://github.com/uxsolutions/bootstrap-datepicker" rel="nofollow noreferrer">https://github.com/uxsolutions/bootstrap-datepicker</a> (with <code>twitter-bootstrap 3</code>). When clicking on the date <code>input</code>, datepicker popup opens in the <strong>top left corner</strong> of the page, not near the <code>input</code> element.</p>

<pre class="lang-html prettyprint-override"><code>&lt;script type="text/javascript"&gt;
  $(function() {
      $('#BirthDate,#passDate,#docDate').datepicker({
          format: "mm.dd.yyyy",
          startDate: "-100y",
          language: "ru",
          orientation: "auto",
          autoclose: true,
          todayHighlight: true,
          toggleActive: true,
          defaultViewDate: { year: 2016, month: 1, day: 1 }
      });
  });
&lt;/script&gt;
</code></pre>

<p>Example: <a href="https://abonent.pskovregiongaz.ru/Gro/AskForVDGO" rel="nofollow noreferrer">https://abonent.pskovregiongaz.ru/Gro/AskForVDGO</a></p>

<p>Tested in: IE, FireFox.</p>

<p><a href="https://i.stack.imgur.com/Faqox.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Faqox.jpg" alt="enter image description here"></a></p>

<p>Tested with latest stable and v1.7.0-dev. I have no clue, what else to do.</p>

<p><strong>UPDATE:</strong> HTML source.</p>

<pre><code>&lt;!-- language: lang-html --&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;    
    &lt;link href="../Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /&gt;
    &lt;!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js --&gt;
    &lt;script type="text/javascript" src="/Scripts/jquery.min.js"&gt;&lt;/script&gt;
    &lt;!-- http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js --&gt;
    &lt;script type="text/javascript" src="/Scripts/jquery-ui.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="/Scripts/bootstrap.min.js"&gt;&lt;/script&gt;

    &lt;!-- Datepicker --&gt;
    &lt;link rel="Stylesheet" href="/Content/bootstrap-datepicker3.min.css" /&gt;
    &lt;script type="text/javascript" src="/Scripts/bootstrap-datepicker.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="/Scripts/bootstrap-datepicker.ru.min.js"&gt;&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;
    &lt;form action="/Gro/AskForVDGO" id="form0" method="post"&gt;
    &lt;div class="form-group"&gt;
        &lt;label for="BirthDate"&gt;Дата рождения&lt;/label&gt;
        &lt;input class="text-box single-line" id="BirthDate" name="BirthDate" type="text" value="01.01.0001" /&gt;
    &lt;/div&gt;
    &lt;p&gt;
        &lt;input type="submit" class="btn btn-success btn-lg btn-block" value="Отправить" title="Отправить" /&gt;&lt;/p&gt;
&lt;/form&gt;
&lt;script type="text/javascript"&gt;
  $(function() {
      $('#BirthDate').datepicker({
          format: "mm.dd.yyyy",
          startDate: "-100y",
          language: "ru",
          orientation: "auto",
          autoclose: true,
          todayHighlight: true,
          toggleActive: true,
          defaultViewDate: { year: 2016, month: 1, day: 1 }
      });
  });
&lt;/script&gt;
&lt;/body&gt;&lt;/html&gt;
</code></pre>

<p><strong>UPDATE 2</strong>: @TechBreak answer lead to persistent datapicker (opened on load, didn't close) element on page. Datapicker persists under input element, and shown permanently. More date <code>input</code> elements - more datepickers shown at moment.
<a href="https://i.stack.imgur.com/7yW9x.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7yW9x.jpg" alt="enter image description here"></a></p>