我目前在 Angular 4.x 中构建自定义下拉组件,这是它的模板:
<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>
我的问题是,当我打开“options div”时,此元素与 mi 自定义组件同级的其他元素重叠。我知道 z-index,但把它放在我的组件上,迫使我每次都检查其他同级元素,这使得组件不可重用。
我检查了 semantic.css 和 bootstrap 下拉组件,它们在组件内的元素中定义了 z-index 样式,这让我感到困惑。
另一方面,检查 angular 2 Material 选择,它被放在一个覆盖元素中,这样自定义选择覆盖所有元素是有意义的。
请解释一下 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>
最佳答案
给 vet-input-container
position: relative 然后菜单选项应该给 position: absolute 和 z-index: 100(数量并不重要,只要它高于您的其他内容)。
关于html - 自定义选择输入 Angular 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47962383/