angular - пользовательский выпадающий список с z-index не работает - PullRequest
Новая
       39

angular - пользовательский выпадающий список с z-index не работает

0 голосов
/ 14 апреля 2020

Я знаю, что есть много сообщений об использовании z-index, но я не могу найти тот, который отвечает на мой вопрос. Я пишу пользовательский выпадающий компонент, который должен перекрывать элементы под ним.

Вот очень упрощенный пример, который иллюстрирует точку, которая появляется ниже или может быть просмотрена в плукере: https://plnkr.co/plunk/pt85B6TvbRRIjjji

Любые предложения приветствуются!

Спасибо - Джон 

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

@Component({
  selector: 'app-root',
  template: `
  <h3>Custom dropdown - z-index</h3> 
  <div style="position:relative; width:45%;">
      <input type="text" [(ngModel)]="inputString">
      <button (click)="toggleDropdown()">Toggle dropdown</button>
      <div *ngIf="showDropdown" style="z-index: 9999; width:35%; border:1px solid blue;">
          <div *ngFor="let day of days">
              {{day}}
          </div>
      </div>
      <div >
          <p>How can I make the list cover this text when visible?</p>
      </div>
  </div>  
  `
})
export class AppComponent {
  showDropdown:boolean = false; 
  days:string[] = [
    'Monday', 
    'Tuesday', 
    'Wednesday', 
    'Thursday', 
    'Friday', 
    'Saturday', 
    'Sunday'
  ]; 
  inputString:string = this.days[0];
  title = 'z-index with dropdown';
  toggleDropdown() {
    this.showDropdown = !this.showDropdown;    
  }

}

1 Ответ

1 голос
/ 14 апреля 2020

Используйте абсолютное позиционирование, если хотите, чтобы оно охватывало текст. 

<div *ngIf="showDropdown" style="z-index: 10; width:35%; border:1px solid blue; position: absolute; top: 0; left: 0; background-color: white;">
   <div *ngFor="let day of days">
      {{day}}
   </div>
</div>

https://plnkr.co/edit/NuStX5Ojo5uEXPsQ

...