Question

我已经尝试过-> Angular Material Dropdown inside Bootstrap Modal 但它对我不起作用。我在md引导程序内使用Angular select。问题是下拉选项出现在模式后面。我的代码如下：

<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>

Answer 1

我也遇到了同样的问题，并尝试了this，但是没有用。我尝试将这些行添加到 styles.css 中，它对我有用。

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

.cdk-overlay-container { z-index:2000; }

md Bootstrap模式内的角度材料下拉

1 个答案: