title: Bootstrap datepicker expands up but not down
body: <p>I am using bootstrap. When I click my <code>date picker</code> it expands up and goes under my navigation bar. How do I fix it? - I would like it to be expanded into visible page area. </p>
  
  <p><img src="https://i.stack.imgur.com/0m5Gt.png" alt="enter image description here"></p>
  
  <p>This is my html/css:</p>
  
  <pre><code>&lt;html ng-app="fly"&gt;
  
      &lt;head&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" href="css/main.css"&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/bootstrap-datepicker.js"&gt;&lt;/script&gt;
  
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="app.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;div ng-controller="myController"&gt;
  
          &lt;nav class="navbar navbar-inverse navbar-static-top"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;a class="navbar-brand logo" href="#"&gt;
                          &lt;span class="glyphicon glyphicon-plane"&gt; &lt;/span&gt;
                          &lt;a href="#" class="navbar-text ffly"&gt;FLY&lt;/a&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
  
  
          &lt;div class="container well well-md searchDialog"&gt;
              &lt;form role="search"&gt;
  
                  &lt;div class="row searchRow"&gt;
                      &lt;div class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-12"&gt;
                          &lt;label for="searchBox"&gt;From&lt;/label&gt;
                          &lt;input type="text" class="form-control" id="searchBox"placeholder="Search"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="row dateRow"&gt;
                      &lt;div class='col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-2 col-xs-6'&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="depart"&gt;Depart&lt;/label&gt;
                              &lt;div class='input-group date' id='datetimepicker6'&gt;
                                  &lt;input type='text' id="depart" class="form-control" /&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;/div&gt;
                      &lt;div class='col-md-4 col-md-offset-0 col-sm-4 col-sm-offset-0 col-xs-6'&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="return"&gt;Return&lt;/label&gt;
                              &lt;div class='input-group date' id='datetimepicker7'&gt;
                                  &lt;input type='text' id="return"class="form-control" /&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;/div&gt;
                  &lt;/div&gt;
                  &lt;script type="text/javascript"&gt;
                      $(function () {
                          $('#datetimepicker6').datepicker();
                          $('#datetimepicker7').datepicker();
                          $("#datetimepicker6").on("dp.change", function (e) {
                              $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
                          });
                          $("#datetimepicker7").on("dp.change", function (e) {
                              $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
                          });
                      });
                  &lt;/script&gt;
  
  
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.navbar-brand{
      height: 60px;
  }
  
  .logo {
      font-size: 35px;
  }
  .fridayfly{
      font-size: 25px;
  }
  a.ffly:link { color: #FFFFFF; text-decoration: none}
  a.ffly:visited { text-decoration: none}
  a.ffly:hover { color: #FFFFFF; text-decoration: none}
  a.ffly:active { color: #FFFFFF; text-decoration: none}
  
  
  .dateRow{
  
      margin-top: 20px;
  
  }
  </code></pre>