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

Question

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

问题是我的下拉列表中的项目被隐藏在手风琴面板的后面。我已经阅读了大量关于这个问题的 Whosebug posts（特别是 bootstrap），但提供的解决方案似乎并没有解决这个问题。我已经尝试 css 下拉菜单的属性来设置 z-index 并设置 overflow: visible ，但是这些都没有用。弄乱了这个问题一段时间后，我想我会 post 一个问题。下面的示例非常直接 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。

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

Text from my dropdown is being hidden by an accordion below

css

ng-bootstrap

angular8