css - 我的下拉菜单中的文本被下面的 Accordion 隐藏了

Question

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

问题是我的下拉列表中的元素被隐藏在 Accordion 面板的后面。我已经阅读了很多关于这个问题的 stackoverflow 帖子(特别是关于 Bootstrap )，但是提供的解决方案似乎并没有解决这个问题。我已经尝试将 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 .