Раскрывающийся список угловых материалов внутри md Bootstrap Modal

Я пробовал это -> Выпадающий список Angular Material внутри Bootstrap Modal, но он не работает для меня. Я использую Angular select внутри начальной загрузки md. Проблема в том, что выпадающие параметры отображаются за модальным окном. Мой код выглядит так:

<button type="button" mat-button data-toggle="modal" style="background: #dc6254 !important;" style="margin-top: -1px;"  data-target="#basicExampleModal">
      Select


<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel">Fill the following</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <div class="overlay-content">
        <mat-form-field> 
            <mat-select name="status" ngModel  placeholder="Status">
              <mat-option value="Accepted">
                Accepted
              </mat-option>
              <mat-option value="Rejected">
                Rejected
              </mat-option>
              <mat-option value="hold">
                Hold
              </mat-option>
               <mat-option value="West">
                In Process
              </mat-option>
            </mat-select>
          </mat-form-field>
          </div>



    </div>
    <div class="modal-footer">
      <button type="button" mat-button data-dismiss="modal" style="outline:none;">Close</button>
      <button type="button " mat-button style="outline:none;" >Save changes</button>
    </div>
  </div>
</div>


angular bootstrap-modal mdbootstrap
person kedar kulkarni    schedule 28.08.2018    source источник
comment
Поместите свой код во фрагмент   -  person Sakkeer A    schedule 28.08.2018
comment
Попробуйте z-индекс css. Может быть, это поможет вам   -  person Paresh Gami    schedule 28.08.2018
comment
пробовал z-index везде   -  person kedar kulkarni    schedule 29.08.2018
comment
Если вам все еще интересно, я обнаружил, что это сработало для меня: .cdk-overlay-container{ z-index:2000; }   -  person Josh Jobin    schedule 24.10.2018
comment
Я просто использовал диалоговое окно материала Angular вместо модального окна начальной загрузки.   -  person kedar kulkarni    schedule 25.10.2018

Ответы (1)


arrow_upward
1
arrow_downward

Я также столкнулся с той же проблемой и попробовал это, но не работает. Я попытался добавить эти строки в styles.css, и у меня это сработало.

.cdk-global-overlay-wrapper {
  z-index: 1000;
}

.cdk-overlay-container { z-index:2000; }
person Jithin Raveendran    schedule 06.12.2019