カスタムセレクト入力アンギュラ4

Question

私は現在角度4.xのカスタムドロップダウンコンポーネントを構築し、これは、そのテンプレートです：私は、「オプションのDIV」を開いたときに

<div class="vet-input-container vet-input-container--select" [ngClass]="inputClass()" [ngSwitch]="type"> 
    <div class="vet-input-area" (click)="toggleOpen($event)"> 
    <button tabindex="-1" type="button" mat-raised-button color="primary" class="vet-input-label vet-btn vet-btn--fit" *ngIf="labeled"> 
     <i [ngClass]="labelIconClass"></i> 
    </button> 
    <input type="text" class="vet-input"> 
    <i class="fa fa-caret-down vet-input-dropdown-icon"></i>  
    </div> 
    <div class="vet-input-options"> 
    <div class="option" *ngFor="let item of collection"> 
     {{displayFn(item)}} 
    </div> 
    </div> 
    <div class="vet-input-errors"> 
    <ng-content></ng-content> 
    </div> 
</div> 

私の問題は、この要素がで重ねたされています他の要素はmiカスタムコンポーネントよりも兄弟です。私はz-indexについて知っていますが、これを私のコンポーネントに置いて、毎回他の兄弟要素を確認しなければなりません。これは再利用可能なコンポーネントではありません。

私はsemantic.cssとブートストラップのドロップダウンコンポーネントを調べました。これらのコンポーネントはコンポーネント内の要素に定義されたz-インデックススタイルを持っていて、混乱しています。

一方、角度2の材質選択を確認してください。これはオーバーレイ要素に入れられます。このように、カスタム選択がすべての要素をオーバーレイすることは意味があります。

レベルにかかわらず、semantic.cssとbootstrapの落ち込みがすべての兄弟要素をオーバーレイする方法についての説明が必要です。

更新：テンプレートをsemantic-uiおよびng-primefacesのドロップダウンコンポーネントで置き換えようとしましたが、両方とも兄弟コンポーネントによってオーバーラップしています。

これは、私のカスタム入力を含み、コンポーネントを選択するレイアウトです。兄弟入力は選択オプションをオーバーレイしています。相対して、メニューオプションが与えられるべきである位置：

<div class="flex flex-col-layout ai-stretch"> 
     <app-dnj-input placeholder="Nombre de su veterinaria" formControlName="branchName"> 
     </app-dnj-input> 
     <app-dnj-input placeholder="Nombres" formControlName="veterinarianName"> 
     </app-dnj-input> 
     <app-dnj-input placeholder="Apellidos" formControlName="veterinarianLastName"> 
     </app-dnj-input> 
     <app-dnj-input placeholder="Correo electrónico" formControlName="veterinarianEmail"> 
     </app-dnj-input> 
     <app-dnj-input placeholder="Repita su correo" formControlName="veterinarianConfirmEmail"> 
     </app-dnj-input> 
     <app-dnj-input placeholder="Contraseña" formControlName="veterinarianPassword"> 
     </app-dnj-input> 
     <app-dnj-input placeholder="Repita su contraseña" formControlName="veterinarianConfirmPassword"> 
     </app-dnj-input> 
     <app-dnj-select placeholder="rol" formControlName="veterinarianRole"[collection]="roleList" 
     [displayFn]="displayRoleFn"> 
     </app-dnj-select> 
     <app-dnj-input placeholder="rol" formControlName="veterinarianRole" type="select" [collection]="roleList" 
     [displayFn]="displayRoleFn"> 
     </app-dnj-input> 
    </div> 

Answer 1

はvet-input-container位置を与える絶対とzインデックスを：100（金額はしない、本当に問題で、限りそのコンテンツの残りの部分よりも高いです）。