title: Custom select input Angular 4
body: <p>I currently building a custom dropdown component in Angular 4.x, this is its template:</p>
  
  <pre><code>&lt;div class="vet-input-container vet-input-container--select" [ngClass]="inputClass()" [ngSwitch]="type"&gt;
    &lt;div class="vet-input-area" (click)="toggleOpen($event)"&gt;
      &lt;button tabindex="-1" type="button" mat-raised-button color="primary" class="vet-input-label vet-btn vet-btn--fit" *ngIf="labeled"&gt;
        &lt;i [ngClass]="labelIconClass"&gt;&lt;/i&gt;
      &lt;/button&gt;
      &lt;input type="text" class="vet-input"&gt;
      &lt;i class="fa fa-caret-down vet-input-dropdown-icon"&gt;&lt;/i&gt;    
    &lt;/div&gt;
    &lt;div class="vet-input-options"&gt;
      &lt;div class="option" *ngFor="let item of collection"&gt;
        {{displayFn(item)}}
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="vet-input-errors"&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My issue is when i open the "options div", this element is overlaped by others elements sibling than mi custom component. I know about the z-index, but put this on my component, force me to check other sibling elements everytime, and this makes a not reusable component.</p>
  
  <p>I inspected semantic.css and bootstrap dropdown components and these have a z-index style defined in elements within the component and this makes me feel confused.</p>
  
  <p>On the other hand, check angular 2 material select and this is put in a overlay elements, in this way it makes sense that the custom select overlay all elements.</p>
  
  <p>Please, need an explication about how the drowdowns of semantic.css and bootstrap overlay all sibling elements, no matter the level.</p>
  
  <p>UPDATE: I tried replacing my template with semantic-ui and ng-primefaces dropdowns component, but both are overlaped by sibling components.</p>
  
  <p>This the layout that contains my custom inputs and selects components. Sibling input is overlaying the select options.</p>
  
  <pre><code>&lt;div class="flex flex-col-layout ai-stretch"&gt;
        &lt;app-dnj-input placeholder="Nombre de su veterinaria" formControlName="branchName"&gt;
        &lt;/app-dnj-input&gt;
        &lt;app-dnj-input placeholder="Nombres" formControlName="veterinarianName"&gt;
        &lt;/app-dnj-input&gt;
        &lt;app-dnj-input placeholder="Apellidos" formControlName="veterinarianLastName"&gt;
        &lt;/app-dnj-input&gt;
        &lt;app-dnj-input placeholder="Correo electrónico" formControlName="veterinarianEmail"&gt;
        &lt;/app-dnj-input&gt;
        &lt;app-dnj-input placeholder="Repita su correo" formControlName="veterinarianConfirmEmail"&gt;
        &lt;/app-dnj-input&gt;
        &lt;app-dnj-input placeholder="Contraseña" formControlName="veterinarianPassword"&gt;
        &lt;/app-dnj-input&gt;
        &lt;app-dnj-input placeholder="Repita su contraseña" formControlName="veterinarianConfirmPassword"&gt;
        &lt;/app-dnj-input&gt;
        &lt;app-dnj-select placeholder="rol" formControlName="veterinarianRole"[collection]="roleList"
        [displayFn]="displayRoleFn"&gt;
        &lt;/app-dnj-select&gt;
        &lt;app-dnj-input placeholder="rol" formControlName="veterinarianRole" type="select" [collection]="roleList"
        [displayFn]="displayRoleFn"&gt;
        &lt;/app-dnj-input&gt;
      &lt;/div&gt;
  </code></pre>