下拉菜单中的文本被下面的手风琴遮挡了

Question

下拉菜单中的文本被下面的手风琴遮挡了

4

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

问题在于，我的下拉列表中的项目被隐藏在手风琴面板后面。我已经阅读了许多关于此问题的stackoverflow帖子（具体涉及bootstrap），但提供的解决方案似乎无法解决问题。我尝试过为下拉菜单设置z-index和设置overflow: visible的CSS属性，但两者都没有起作用。在花费了相当长的时间后，我决定发布一个问题。以下示例基本上直接来自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个项目，但是它被截断了。

- noel

你找到解决方案了吗？ - kuldeep

很遗憾，我没有。 - noel

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kuldeep · Accepted Answer

我已经成功解决了这个问题。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上帮助我。