title: Chosen Options Going Under Container
body: <p>I'm using the chosen dropdown library for an angularjs project using the <a href="https://github.com/localytics/angular-chosen" rel="nofollow noreferrer">angular-chosen</a> directive.</p>
  
  <p>I'm currently working on implementing a paginated table and I'm having a problem with the dropdown options appearing underneath the container div in my body.</p>
  
  <p><img src="https://i.imgur.com/j1YO9wC.png" alt="screenshot"></p>
  
  <p>Here is the relevant html</p>
  
  <pre><code>&lt;section&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;div class="data-table"&gt;
                  &lt;div class="data-table-header"&gt;
                      &lt;h2&gt;Name - 000111222&lt;/h2&gt;
                  &lt;/div&gt;
                  &lt;div class="data-table-content"&gt;
                      &lt;table class="table-striped"&gt;
                          &lt;tbody&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;001&lt;/td&gt;
                                  &lt;td&gt;Test, Test&lt;/td&gt;
                                  &lt;td&gt;Import Complete&lt;/td&gt;
                                  &lt;td&gt;10/24/2013 7:27:42&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td colspan="4" class="pagination"&gt;
                                      &lt;div class="page-size"&gt;
                                          Page Size:
                                          &lt;select chosen disable-search="true" id="page-size"&gt;
                                              &lt;option&gt;10 items&lt;/option&gt;
                                              &lt;option&gt;25 items&lt;/option&gt;
                                              &lt;option&gt;50 items&lt;/option&gt;
                                              &lt;option&gt;100 items&lt;/option&gt;
                                          &lt;/select&gt;
                                      &lt;/div&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I tried commenting out all of my custom css for styling the dropdown and nothing changed in regards to this issue.</p>
  
  <p>Any help would be greatly appreciated</p>
  
  <p>Edit: I used firefox's 3d view to take a look and it doesn't seem to be a z-index issue</p>
  
  <p><img src="https://i.imgur.com/miMz7F6.png" alt="zindex screenshot"></p>