title: Twitter bootstrap select menu pushing other elements below
body: <p><img src="https://i.stack.imgur.com/EAUXQ.jpg" alt="BEfore"></p>
  
  <p><img src="https://i.stack.imgur.com/xaGMW.jpg" alt="enter image description here"></p>
  
  <p>This is what is happening.Im using bootsrap-select for this select.</p>
  
  <p>its css is</p>
  
  <pre><code>/*!
   * bootstrap-select v1.4.2
   * http://silviomoreto.github.io/bootstrap-select/
   *
   * Copyright 2013 bootstrap-select
   * Licensed under the MIT license
   */
  
  .bootstrap-select.btn-group,
  .bootstrap-select.btn-group[class*="span"] {
      float: none;
      display: inline-block;
      margin-bottom: 10px;
      margin-left: 0;
  }
  .form-search .bootstrap-select.btn-group,
  .form-inline .bootstrap-select.btn-group,
  .form-horizontal .bootstrap-select.btn-group {
      margin-bottom: 0;
  }
  
  .bootstrap-select.form-control {
      margin-bottom: 0;
      padding: 0;
      border: none;
  }
  
  .bootstrap-select.btn-group.pull-right,
  .bootstrap-select.btn-group[class*="span"].pull-right,
  .row-fluid .bootstrap-select.btn-group[class*="span"].pull-right {
      float: right;
  }
  
  .input-append .bootstrap-select.btn-group {
      margin-left: -1px;
  }
  
  .input-prepend .bootstrap-select.btn-group {
      margin-right: -1px;
  }
  
  .bootstrap-select:not([class*="span"]):not([class*="col-"]):not([class*="form-control"]) {
      width: 150px;
  }
  
  .bootstrap-select {
      /*width: 220px\9; IE8 and below*/
      width: 220px\0; /*IE9 and below*/
  }
  
  .bootstrap-select.form-control:not([class*="span"]) {
      width: 100%;
  }
  
  .bootstrap-select &gt; .btn {
      font-weight:700;border-style:solid;
  border-width:2px;
      width: 100%;
  }
  
  .error .bootstrap-select .btn {
      border: 1px solid #b94a48;
  }
  
  
  .dropdown-menu {
    z-index: 2000;
  }
  
  .bootstrap-select.show-menu-arrow.open &gt; .btn {
      z-index: 2051;
  }
  
  .bootstrap-select .btn:focus {
      outline: thin dotted #333333 !important;
      outline: 5px auto -webkit-focus-ring-color !important;
      outline-offset: -2px;
  }
  
  .bootstrap-select.btn-group .btn .filter-option {
      overflow: hidden;
      position: absolute;
      left: 12px;
      right: 25px;
      text-align: left;
  }
  
  .bootstrap-select.btn-group .btn .caret {
      position: absolute;
      top: 50%;
      right: 12px;
      margin-top: -2px;
      vertical-align: middle;
  }
  
  .bootstrap-select.btn-group &gt; .disabled,
  .bootstrap-select.btn-group .dropdown-menu li.disabled &gt; a {
      cursor: not-allowed;
  }
  
  .bootstrap-select.btn-group &gt; .disabled:focus {
      outline: none !important;
  }
  
  .bootstrap-select.btn-group[class*="span"] .btn {
      width: 100%;
  }
  
  .bootstrap-select.btn-group .dropdown-menu {
      min-width: 100%;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  
  .bootstrap-select.btn-group .dropdown-menu.inner {
      position: static;
      border: 0;
      padding: 0;
      margin: 0;
      -webkit-border-radius: 0;
         -moz-border-radius: 0;
              border-radius: 0;
      -webkit-box-shadow: none;
         -moz-box-shadow: none;
              box-shadow: none;
  }
  
  .bootstrap-select.btn-group .dropdown-menu dt {
      display: block;
      padding: 3px 20px;
      cursor: default;
  }
  
  .bootstrap-select.btn-group .div-contain {
      overflow: hidden;
  }
  
  .bootstrap-select.btn-group .dropdown-menu li {
      position: relative;
  }
  
  .bootstrap-select.btn-group .dropdown-menu li &gt; a.opt {
      position: relative;
      padding-left: 35px;
  }
  
  .bootstrap-select.btn-group .dropdown-menu li &gt; a {
      cursor: pointer;
  }
  
  .bootstrap-select.btn-group .dropdown-menu li &gt; dt small {
      font-weight: normal;
  }
  
  .bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a i.check-mark {
      display: inline-block;
      position: absolute;
      right: 15px;
      margin-top: 2.5px;
  }
  
  .bootstrap-select.btn-group .dropdown-menu li a i.check-mark {
      display: none;
  }
  
  .bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
      margin-right: 34px;
  }
  
  .bootstrap-select.btn-group .dropdown-menu li small {
      padding-left: 0.5em;
  }
  
  .bootstrap-select.btn-group .dropdown-menu li:not(.disabled) &gt; a:hover small,
  .bootstrap-select.btn-group .dropdown-menu li:not(.disabled) &gt; a:focus small,
  .bootstrap-select.btn-group .dropdown-menu li.active:not(.disabled) &gt; a small {
      color: #64b1d8;
      color: rgba(255,255,255,0.4);
  }
  
  .bootstrap-select.btn-group .dropdown-menu li &gt; dt small {
      font-weight: normal;
  }
  
  .bootstrap-select.show-menu-arrow .dropdown-toggle:before {
      content: '';
      display: inline-block;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 7px solid #CCC;
      border-bottom-color: rgba(0, 0, 0, 0.2);
      position: absolute;
      bottom: -4px;
      left: 9px;
      display: none;
  }
  
  .bootstrap-select.show-menu-arrow .dropdown-toggle:after {
      content: '';
      display: inline-block;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid white;
      position: absolute;
      bottom: -4px;
      left: 10px;
      display: none;
  }
  
  .bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:before {
    bottom: auto;
    top: -3px;
    border-top: 7px solid #ccc;
    border-bottom: 0;
    border-top-color: rgba(0, 0, 0, 0.2);
  }
  
  .bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:after {
    bottom: auto;
    top: -3px;
    border-top: 6px solid #ffffff;
    border-bottom: 0;
  }
  
  .bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:before {
      right: 12px;
      left: auto;
  }
  .bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:after {
      right: 13px;
      left: auto;
  }
  
  .bootstrap-select.show-menu-arrow.open &gt; .dropdown-toggle:before,
  .bootstrap-select.show-menu-arrow.open &gt; .dropdown-toggle:after {
      display: block;
  }
  
  .bootstrap-select.btn-group .no-results {
      padding: 3px;
      background: #f5f5f5;
      margin: 0 5px;
  }
  
  .mobile-device {
      position: absolute;
      top: 0;
      left: 0;
      display: block !important;
      width: 100%;
      height: 100% !important;
      opacity: 0;
  }
  
  .bootstrap-select.fit-width {
      width: auto !important;
  }
  
  .bootstrap-select.btn-group.fit-width .btn .filter-option {
      position: static;
  }
  
  .bootstrap-select.btn-group.fit-width .btn .caret {
      position: static;
      top: auto;
      margin-top: -1px;
  }
  
  .control-group.error .bootstrap-select .dropdown-toggle{
      border-color: #b94a48;
  }
  
  .bootstrap-select-searchbox {
      padding: 4px 8px;
  }
  
  .bootstrap-select-searchbox input {
      margin-bottom: 0;
  }
  </code></pre>
  
  <p>js is</p>
  
  <pre><code> &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/bootstrap-select.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
    $('.selectpicker').selectpicker({
      style: 'btn btn-white btn-sm'
    });
  });
        &lt;/script&gt;
  </code></pre>
  
  <p>Why is it streching down other elements below?why does this happen?The html is</p>
  
  <pre><code> &lt;div class="form-group"&gt;
  
                        &lt;label class="control-label" style="display:inline;"&gt;Expiry&lt;/label&gt;
  
                 &lt;div&gt;                
  
  
  
      &lt;select class="selectpicker" id="expiry_month" name="expiry_month"&gt;
      &lt;option selected&gt;Select Month&lt;/option&gt;
      &lt;option value="01"&gt;January&lt;/option&gt;
      &lt;option value="02"&gt;February&lt;/option&gt;
      &lt;option value="03"&gt;March&lt;/option&gt;
      &lt;option value="04"&gt;April&lt;/option&gt;
      &lt;option value="05"&gt;May&lt;/option&gt;
      &lt;option value="06"&gt;June&lt;/option&gt;
      &lt;option value="07"&gt;July&lt;/option&gt;
      &lt;option value="08"&gt;August&lt;/option&gt;
      &lt;option value="09"&gt;September&lt;/option&gt;
      &lt;option value="10"&gt;October&lt;/option&gt;
      &lt;option value="11"&gt;November&lt;/option&gt;
      &lt;option value="12"&gt;December&lt;/option&gt;
      &lt;/select&gt;
  
  
  
  
  
  
      &lt;select class="selectpicker" id="expiry_year" name="expiry_year"&gt;
      &lt;option selected&gt;Select Year&lt;/option&gt;
      &lt;option value="2012"&gt;2012&lt;/option&gt;
      &lt;option value="2013"&gt;2013&lt;/option&gt;
      &lt;option value="2014"&gt;2014&lt;/option&gt;
      &lt;option value="2015"&gt;2015&lt;/option&gt;
      &lt;option value="2016"&gt;2016&lt;/option&gt;
      &lt;option value="2017"&gt;2017&lt;/option&gt;
      &lt;option value="2018"&gt;2018&lt;/option&gt;
      &lt;option value="2019"&gt;2019&lt;/option&gt;
      &lt;option value="2020"&gt;2020&lt;/option&gt;
      &lt;option value="2021"&gt;2021&lt;/option&gt;
      &lt;option value="2022"&gt;2022&lt;/option&gt;
      &lt;option value="2023"&gt;2023&lt;/option&gt;
      &lt;option value="2024"&gt;2024&lt;/option&gt;
      &lt;option value="2025"&gt;2025&lt;/option&gt;
      &lt;option value="2026"&gt;2026&lt;/option&gt;                          &lt;option value="2027"&gt;2027&lt;/option&gt;
      &lt;option value="2028"&gt;2028&lt;/option&gt;
      &lt;option value="2029"&gt;2029&lt;/option&gt;
      &lt;option value="2030"&gt;2030&lt;/option&gt;
      &lt;option value="2031"&gt;2031&lt;/option&gt;
      &lt;option value="2032"&gt;2032&lt;/option&gt;
      &lt;option value="2033"&gt;2033&lt;/option&gt;
      &lt;option value="2034"&gt;2034&lt;/option&gt;
      &lt;option value="2035"&gt;2035&lt;/option&gt;
      &lt;option value="2036"&gt;2036&lt;/option&gt;
      &lt;/select&gt;
  
  
  
  
  
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Is it the problem with its css?Or can I use any specifications in the javascript?Im using this  <a href="http://silviomoreto.github.io/bootstrap-select/" rel="nofollow noreferrer">http://silviomoreto.github.io/bootstrap-select/</a></p>