如何在手风琴上制作下拉菜单

时间:2018-10-01 06:33:32

标签: angular twitter-bootstrap ngx-bootstrap

我正在使用ngx-accordion模块显示如下 enter image description here

现在,当我单击详细信息下拉按钮时,视图为 enter image description here

手风琴将其高度调整为下拉菜单。但是我希望下拉列表位于手风琴之上,而不是内部。

1 个答案:

答案 0 :(得分:1)

我没有使用ngx-bootstrap,但是在某些类似的库中,您可以使用appendToBody选项来解决此类错误。

对于ngx-bootstrap,您可以找到示例here

<div class="btn-group" dropdown container="body">
  <button id="button-container" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
          aria-controls="dropdown-container">
    Dropdown on Body <span class="caret"></span>
  </button>
  <ul id="dropdown-container" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-container">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>

关键部分是将container="body"添加到您的下拉菜单中。