맞춤 선택이는 템플릿

나는 현재 각도 4.x의에서 사용자 지정 드롭 다운 구성 요소를 구축 각도 입력 4 :맞춤 선택이는 템플릿

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

내가 "옵션 사업부"를 열 때 내 문제가이 요소에 의해 overlaped된다 다른 요소는 mi 사용자 정의 구성 요소보다 형제입니다. z- 인덱스에 대해 알고 있지만,이를 내 구성 요소에 넣으면 매번 다른 형제 요소를 확인해야하므로 재사용 할 수없는 구성 요소가됩니다.

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

출처

2017-12-24 Josafat Vara Huayta

는 vet-input-container 위치를 부여 절대 및 Z- 인덱스 : 100 (금액은하지 않습니다 정말없이만큼의 콘텐츠의 나머지 부분보다 높은).

출처

2017-12-24 18:41:41 Christian

안녕하세요, 그 클래스는 이미 그 스타일을 가지고 있습니다. –

맞춤 선택이는 템플릿

답변

관련 문제