3

I am using ngx-accordion module to show like this enter image description here

Now when I click on details dropdown button the view is enter image description here

The accordion adjusts its height to the dropdown. But I want the dropdown to be on top of accordion and not inside.

Harish Krishnan
  • 1,693
  • 4
  • 17
  • 25
  • sorry...maybe it's just me...but I can't see any difference between the two screenshots..furthermore...can you provide the code you wrote? – FabioEnne Oct 01 '18 at 06:52
  • @FabioEnne The problem is in the second view if you see when the drop-down is opened, the accordion adjusts its height such that the dropdown is inside the accordion body. I need it to be on top of the accordion body. – Harish Krishnan Oct 01 '18 at 06:55
  • @FabioEnne sorry I uploaded wrong image. I suppose now it should be clear – Harish Krishnan Oct 01 '18 at 07:01

1 Answers1

3

I'm not using ngx-bootstrap but in some similar libraries you can use an appendToBody option to solve such errors.

For ngx-bootstrap you can find an example 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>

Key part is to add container="body" to your dropdown.

Tommy
  • 2,355
  • 1
  • 19
  • 48