title: Bootstrap Datepicker appearing at incorrect location in a modal
body: <p>I have a button on a page that calls a modal having datepicker.</p>
  
  <p>If this button is at top (I don't have to scroll page to click), modal opens and datepicker displays correctly.</p>
  
  <p>But if this button is lower on the page( so that I have to scroll page to click), modal opens and datepicker displays incorrect.
  (NOT SURE if scrolling has a relation)</p>
  
  <p>Here's the <a href="http://jsfiddle.net/InsaneCoder/kdLehcwg/" rel="noreferrer">jsfiddle</a></p>
  
  <p>Here's the image displaying problem, the datepicker should display above as a tooltip, but it goes down :
  <img src="https://i.stack.imgur.com/SvAcZ.png" alt="enter image description here"></p>
  
  <p>Here's the code :</p>
  
  <pre><code>&lt;button type="button" class="btn btn-danger" data-toggle="modal" data-target="#callModal"&gt;Contact&lt;/button&gt;
  
  &lt;div class="modal fade" id="callModal"&gt;
          &lt;div class="modal-dialog"&gt;
            &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
                &lt;h4 class="modal-title"&gt;Modal title&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                &lt;form role="form"&gt;
                  &lt;div class="form-group"&gt;
                    &lt;label for="name"&gt;Name&lt;/label&gt;
                    &lt;input type="text" class="form-control" id="name" placeholder="Enter name"&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                    &lt;label for="contact"&gt;Contact&lt;/label&gt;
                    &lt;input type="text" class="form-control" id="contact" placeholder="Your mobile number"&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                    &lt;div class='col-sm-6'&gt;
                      &lt;div class="form-group"&gt;
                        &lt;label for="cal"&gt;Date &amp;amp; Time&lt;/label&gt;
                        &lt;div class='input-group date' id='datetimepicker1'&gt;
                          &lt;input type='text' class="form-control" id="cal"/&gt;
                          &lt;span class="input-group-addon"&gt;&lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
                        &lt;/span&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                     &lt;script type="text/javascript"&gt;
                  $(function () {
                    $('#datetimepicker1').datetimepicker();
                  });
                &lt;/script&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;button type="button" class="btn btn-danger"&gt;Contact &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;&lt;!-- /.modal-content --&gt;
        &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
      &lt;/div&gt;&lt;!-- /.modal --&gt;
  </code></pre>
  
  <p><strong>EDIT</strong> 
  The datetimepicker tooltip is shifted by the amount by which I scroll the page before clicking the button "Contact" to appear the modal containing the datetimepicker. </p>