我的下拉菜单中的文本被下面的手风琴隐藏了

Question

我是 Angular 的新手，我正在使用 Angular 8 使用 ng-bootstrap 构建一个页面。我的页面上有一个包含 3 个不同部分的手风琴。每个部分包含一个表格。表格中每一行最左边的元素是一个下拉按钮，其中包含我希望能够从中进行选择的页面列表。

问题是我的下拉列表中的项目被隐藏在手风琴面板后面。我已经阅读了很多关于这个问题的 stackoverflow 帖子（特别是引导程序），但是提供的解决方案似乎并没有解决这个问题。我已经尝试在下拉列表中设置 css 属性来设置 z-index 并设置溢出：可见，但这些都没有奏效。在纠结了一段时间之后，我想我会发布一个问题。下面的示例几乎直接来自 ng-bootstrap.github.io。

  <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
    <ngb-panel title="ngbAccordion Panel #1">
      <ng-template ngbPanelContent>
        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.
        <div class="row">
          <div class="col">
            <div ngbDropdown class="d-inline-block">
              <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
              <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
                <button ngbDropdownItem>Thing 1</button>
                <button ngbDropdownItem>Thing 2</button>
                <button ngbDropdownItem>Thing 3</button>
              </div>
            </div>
          </div>
        </div>
        <br>
      </ng-template>
    </ngb-panel>
    <ngb-panel title="ngbAccordion Panel #2">
        <ng-template ngbPanelContent>
          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.
        </ng-template>
      </ngb-panel>
  </ngb-accordion>

下面是我最终得到的图片：

下拉菜单应该显示 3 个项目，但它被切断了。

Answer 1

我能够解决它。ng-bootstrap 的技巧是在 ngbDropDown 上使用 container="body"。查看此stackblitz以获取正在运行的示例。

html 的示例代码

<div ngbDropdown container="body" class="d-inline-block">
  <button class="btn btn-outline-primary"
   id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
  <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
    <button ngbDropdownItem>Sample action 1</button>
    <button ngbDropdownItem>Sample action 2</button>
    <button ngbDropdownItem>Sample action 3</button>
    <button ngbDropdownItem>Sample action 4</button>
    <button ngbDropdownItem>Another Action</button>
    <button ngbDropdownItem>Something else is here</button>
  </div>
</div>

感谢 Benouat 在 ng-bootstrap github 问题3135上帮助我。