Z-Index funktioniert nicht in Internet Explorer 11

Question

Ich habe ein Problem mit dem Z-Index auf IE 11, erscheint ein Dropdown-Element unter anderem Element in einer Popup-Nachricht. Lassen Sie mich Ihnen eine kleine Skizze zeigen, die von der Seite aufgenommen wurde.

Pop-up sample

ich Reasearch für viele possibles Lösungen aber jede nicht funktioniert für mich. Auch ich bin mit PrimeFaces mit kantigen 2. fand ich this solution diese Art von Problem in IE zu beheben:

<div style="position: relative; z-index: 3000"> 

    <div style="position: absolute; z-index: 1000"> 

     [ ... ] <!-- The drop down menu will be here --> 

    </div> 
</div> 

Und ich versuchte, auf diese Weise mit meinem Code zu verwenden, aber nicht funktioniert. :(

<p-dialog header="Assign claim {{ vm.request.id }}" [(visible)]="vm.isDisplayed" [width]="700" [modal]="true" > 
<div class="ui-g form-group"> 
    <div style="z-index: 3000"> 

     <div class="ui-g-6"> 
      <h4>Lorem ipsum</h4> 
      {{vm.request.responsible}} 
     </div> 

     <div class="ui-g-6"> 
      <h4>et dolo</h4> 
      <div style="z-index: 1000"> <!-- This dropdown menu should to appear over the form, not behind :( --> 
       <p-dropdown class="popup-dropdown" [(ngModel)]="vm.id" [options]="vm.users" [autoWidth]="false" (onChange)="changeAssignedUserId($event.value)"> 
       </p-dropdown> 
      </div> 
     </div>   
     <div class="ui-g ui-g-12"></div> 

     </div> 

</div> 

<!-- More awesome code! --> 

Kann mir jemand helfen?

Vielen Dank im Voraus für alle. Ashia.

Answer 1

Denn leider kann Sie nichtz-index für ein Kind Komponente neu zu definieren mit einem Übergeordnetes Element, das bereits z-index definiert ist. Das untergeordnete Element erbt z-index von diesem übergeordne- ten Element, wenn es existiert.

können Sie die z-index: -1; Hack verwenden, aber es ist nicht wirklich eine stabile und ratsame Lösung ...

Der beste Ansatz ist z-index für „Bruder“ Komponente (beide .ui-g-6 zum Beispiel) zu definieren.

Answer 2

Ich denke, dass Ihr Problem von PrimeNG kommt. Beachten Sie, dass Sie einen p-Dialog verwenden, mit einer p-Drop-Down-Komponente innerhalb, wie die PrimeNG Dokumentation erklärt:

Overlays Inside 
When dialog includes other components with overlays such as dropdown, the 
overlay part cannot exceed dialog boundaries due to overflow. In order to 
solve this, you can either append the overlay to the body or allow overflow 
in dialog. 


<p-dialog> 
    <p-dropdown appendTo="body"></p-dropdown> 
</p-dialog> 


<p-dialog [contentStyle]="{'overflow':'visible'}"> 
    <p-dropdown></p-dropdown> 
</p-dialog> 

Dann sollten Sie den Code sein:

<p-dialog header="Assign claim {{ vm.request.id }}" 
     [(visible)]="vm.isDisplayed" [width]="700" [modal]="true" 
     [contentStyle]="{'overflow':'visible'}> 

    <div class="ui-g form-group"> 
     <div style="z-index: 3000"> 

    <div class="ui-g-6"> 
     <h4>Lorem ipsum</h4> 
     {{vm.request.responsible}} 
    </div> 

    <div class="ui-g-6"> 
     <h4>et dolo</h4> 
     <div style="z-index: 1000"> 

      <p-dropdown class="popup-dropdown" appendTo="body" 
       [(ngModel)]="vm.id" [options]="vm.users" [autoWidth]="false" 
       (onChange)="changeAssignedUserId($event.value)"> 
      </p-dropdown> 
     </div> 
    </div>   
    <div class="ui-g ui-g-12"></div> 

    </div> 

</div> 

Dies Ihr Problem beheben soll.

;-)

Answer 3

Vielen Dank an alle, die speziell auf @MadDev, schließlich hat ich das Problem nach Ihrer Antwort gelöst, habe ich den folgenden Code

<p-dialog [contentStyle]="{'overflow':'visible'}"> 

    <p-dropdown appendTo="body"></p-dropdown> 

</p-dialog> 

Ashia.