title: Text from my dropdown is being hidden by an accordion below
body: <p>I am new to Angular and I'm building a page with ng-bootstrap using Angular 8.  I have an accordion on my page with 3 different sections.  Each section contains a table.  The leftmost element of each row in the table is a dropdown button that contains a list of pages that I'd like to be able to select from.</p>
  
  <p>The problem is that the items from my dropdown list are being hidden behind the panel of the accordion.  I've read numerous stackoverflow posts about this issue (specifically with bootstrap), but the solutions provided don't seem to solve the issue.  I've tried css properties to the dropdown to set the z-index and to set overflow: visible, but neither of those have worked.  After messing around with this for quite some time, I figured that I would post a question.  The examples below are pretty much straight off ng-bootstrap.github.io.</p>
  
  <pre><code>  &lt;ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0"&gt;
      &lt;ngb-panel title="ngbAccordion Panel #1"&gt;
        &lt;ng-template ngbPanelContent&gt;
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
          aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
          sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
          craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
          occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
          labore sustainable VHS.
          &lt;div class="row"&gt;
            &lt;div class="col"&gt;
              &lt;div ngbDropdown class="d-inline-block"&gt;
                &lt;button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle&gt;Toggle dropdown&lt;/button&gt;
                &lt;div ngbDropdownMenu aria-labelledby="dropdownBasic1"&gt;
                  &lt;button ngbDropdownItem&gt;Thing 1&lt;/button&gt;
                  &lt;button ngbDropdownItem&gt;Thing 2&lt;/button&gt;
                  &lt;button ngbDropdownItem&gt;Thing 3&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;br&gt;
        &lt;/ng-template&gt;
      &lt;/ngb-panel&gt;
      &lt;ngb-panel title="ngbAccordion Panel #2"&gt;
          &lt;ng-template ngbPanelContent&gt;
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
            aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
            sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
            craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
            occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
            labore sustainable VHS.
          &lt;/ng-template&gt;
        &lt;/ngb-panel&gt;
    &lt;/ngb-accordion&gt;
  </code></pre>
  
  <p>Below is a picture of what I end up with:</p>
  
  <p><a href="https://i.stack.imgur.com/ivFAg.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ivFAg.gif" alt="dropdown"></a></p>
  
  <p>The dropdown should be displaying 3 items, but it's cutting off.</p>