Способы сделать bootstrap выпадающим, чтобы показать поверх модальной - PullRequest
Новая
       46

Способы сделать bootstrap выпадающим, чтобы показать поверх модальной

0 голосов
/ 22 марта 2020

Я пытаюсь создать модал bootstrap с Angular, который имеет ввод тега из модуля ngx-chips. У ввода тега есть функция автозаполнения, которая принимает массив данных для отображения в виде раскрывающегося списка.

Я сталкиваюсь с тем, что раскрывающийся список находится за модальным, а не поверх модального. Таким образом, отображаемые значения не кликабельны. Когда я пытаюсь добавить css к нему с помощью элемента inspect, я не могу добавить их, потому что если я щелкну где-нибудь еще на экране браузера, выпадающий список исчезнет.

Мне нужно отобразить выпадающий поверх модального bootstrap. Пожалуйста, дайте мне знать, если кто-нибудь может помочь мне с css для него.

Это код для моего модального и выпадающего с 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>

Это визуализированный модал и выпадающий список

enter image description here

1 Ответ

2 голосов
/ 22 марта 2020

Вам нужно будет добавить атрибут [appendToBody] = "false" в tag-input-dropdown . Также добавьте ниже css. 

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

Вы можете найти больше информации здесь.

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

...