Как отобразить опции выбора матов в верхней части диалогового окна? - PullRequest
Новая
       32

Как отобразить опции выбора матов в верхней части диалогового окна?

0 голосов
/ 03 июня 2019

Решение, которое я нашел для установки в глобальном css-файле: 

.cdk-global-overlay-wrapper, .cdk-overlay-container {
  z-index: 10000;
}

разрывает другие диалоговые окна (например, MatDatepicker, используемый внутри формы в MatDialog, отображается за ним).Установка его локально, кажется, не имеет никакого эффекта, изменяя инкапсуляцию вида в соответствии с этим сообщением: Отображение выбора циновки внутри модального диалога все еще нарушает другие диалоговые окна (так же, как стиль глобального набора).Могу ли я добиться этого каким-либо другим способом?

Отредактировано:

Пример стекаблица, где опции выбора даже не отображаются: https://stackblitz.com/edit/angular-jkxsig-en8bze?file=app/

Ответы [ 2 ]

0 голосов
/ 04 июня 2019

Хорошо, похоже, я нашел причину проблемы и решение.Таким образом, причина проблемы в том, что модальное окно начальной загрузки ( ngb-modal-window ) отображается под фоном ( ngb-modal-background ), как описано здесь:

Bootstrap, модальный, появляющийся под фоном

Установка модального окна z-index не имеет никакого эффекта, потому что фон всегда выше в контексте стека, и платформа начальной загрузки всегда переопределяет свой z-index на 1050после создания компонента.Есть два решения этой проблемы, которые я нашел здесь:

Модал начальной загрузки, появляющийся под фоном

1.) Отключите фон, используя NgbModalOptions (установка свойства backdrop в false) и добавление класса для модального окна (установка свойства windowClass).Затем установите очень низкое значение для z-index для нашего класса окна, например, в глобальном style.css файле: 

ngb-modal-window.test {
    z-index: 1;
}

Недостаток в том, что у нас сейчас нет фона для нашей начальной загрузки.

2.) Добавление модального окна непосредственно под контейнером тела в иерархии html или просто добавление его к нему, как описано здесь:

https://github.com/twbs/bootstrap/issues/23916

Я не проверял его,но это должно работать, здесь вы можете найти информацию о том, как добавить элемент в тело HTML:

https://hackernoon.com/angular-pro-tip-how-to-dynamically-create-components-in-body-ba200cc289e6

0 голосов
/ 04 июня 2019

Когда я инициализировал идентификатор, он работал. 

import {Component} from '@angular/core';

import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

export interface Food {
  value: string;
  viewValue: string;
}

@Component({
  selector: 'ngbd-modal-basic',
  templateUrl: './modal-basic.html'
})
export class NgbdModalBasic {
    foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];
  closeResult: string;
  ariaId = 'modal-basic-title';

  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title', size: 'lg', backdrop: 'static' }, ).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }
}

HTML 

<code><ng-template #content let-modal let-id="ariaId">
  <div class="modal-header">
    <h4 class="modal-title" id="{{ariaId}}">Profile update</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">
        <label for="dateOfBirth">Date of birth</label>
        <div class="input-group">
          <input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
          </div>
        </div>
      </div>
      <h4>Basic mat-select</h4>
      <mat-form-field>
        <mat-label>Favorite food</mat-label>
        <mat-select>
          <mat-option *ngFor="let food of foods" [value]="food.value">
            {{food.viewValue}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
  </div>
</ng-template>

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>

<hr>

<pre>{{closeResult}}
...