Search code examples
javascriptangularangular6bootstrap-modalngx-chips

Ways to make bootstrap dropdown to show on top of a modal

I'm trying to create a bootstrap modal with Angular, which has a tag-input from ngx-chips module. The tag input has an autocomplete feature, which takes array of data to be displayed as dropdown.

What I'm facing is that e dropdown comes behind the modal and not on top of the modal. So the values displayed are not clickable. When I try to add css to it using inspect element, I am not able to add them because if I click anywhere else on the browser screen, the dropdown faded away.

I need to be able to display dropdown on top of the bootstrap modal. Please let me know if anyone can help me with the css for it.

This is the code for my modal and drop down with angular boostrap,

<ng-template #contentone let-modal>
      <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">Select Skill</h4>
        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <tag-input [(ngModel)]="searchText" name="srch-term" id="srch-term" placeholder="Search">
              <tag-input-dropdown [autocompleteItems]="listofdata"></tag-input-dropdown>
            </tag-input>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="open(content)">Search</button>
      </div>
    </ng-template>

This is the rendered modal and dropdown

enter image description here

Solution

  • You will have to add an attribute [appendToBody]="false" to tag-input-dropdown. Also add below css.

    tag-input tag-input-dropdown /deep/ ng2-dropdown div.ng2-dropdown-menu {
    top: inherit !important;
    left: inherit !important;
}

    You can find more information here.

    https://github.com/Gbuomprisco/ngx-chips/issues/172#issuecomment-341026228