Forcing Iframe in eine Kollaps-Bootstrap-Komponente passend zum Bildschirm

Question

Ich benutze eine Accordion Collapse Bootstrap-Komponente, um zwei Kollaps-Elemente auf einer Seite anzuzeigen. Das erste Minimierungselement ist standardmäßig minimiert und das zweite Element enthält einen iframe, der ein PDF-Dokument anzeigt. Ich brauche den zweiten zusammenklappbaren Gegenstand, der auf die linke Höhe des Bildschirms passt. Ich habe versucht, es mit Flex-Boxen zu erreichen, aber es scheint, dass es ein Problem mit dem Zusammenbruch-Ereignis und der Flex-Box gibt. Ich würde jede Hilfe schätzen.

Dies ist meine Geige Beispiel:

Example

Das folgende Bild zeigt das unerwünschte Verhalten:

<vp-leftpanel> 
    <div class="panel-group" id="accordion" role="tablist" aria- 
     multiselectable="true"> 
     <div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headingOne"> 
     <h4 class="panel-title"> 
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
       {{panelHeadingData}} 
      </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
     <div class="panel-body"> 
      <div *ngIf="candidate.hasEmailSourceData"> 

       ..... 

      </div>     
     </div> 
    </div> 
</div> 
<div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headingTwo"> 
     <div class="panel-title"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
         {{panelHeadingResume}} 
        </a> 
       </div> 
       <div class="col-md-6"> 
        <select class="form-control" (change)='loadDocument($event.target.value)'> 
         <option [value]="d.id" *ngFor="let d of candidate.candidateDocuments">{{d.friendlyName}}</option> 
        </select> 
       </div> 
      </div> 

     </div> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo"> 
     <div class="panel-body"> 
      <div *ngIf="candidate.candidateDocuments.length > 0" class="apply-flex"> 
       <iframe [src]="documentSelectedPathSafe" type="application/pdf" ></iframe> 
      </div> 
     </div> 
    </div> 
</div> 
    </div> 
    </vp-leftpanel> 

Answer 1

ersetzen Sie einfach den CSS height=100% mit max-height: 200px;.

Answer 2

Das mit Flexbox zu ermöglichen ist etwas kompliziert.

In diesem fiddle demo Ich habe/die unter Klassen angewendet, es zu erreichen, voll dynamisch, dachte, das wird die Akkordeons zeigt brechen/verstecken

.fullvh { 
    height: 100vh; 
} 
.flex-box-col { 
    display: flex; 
    flex-direction: column; 
} 
.flex-grow { 
    flex-grow: 1; 
} 
.pos-relative { 
    position: relative; 
} 
/* as it didn't work adding "flex-box-col flex-grow" to this 
    elements class, I added it using its ID #collapseTwo */ 
#collapseTwo {   
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
} 
.pos-absolute { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

---

Eine Alternative, in diesem fiddle demo, das wird nicht brechen Sie das Akkordeon, würde stattdessen geben Sie die iframe eine Höhe Kombination von Viewport-Einheiten vh und CSS calc(). Auch wenn die fixe Höhe etwas bekannt ist, ist sie immer noch weniger dynamisch als die vorherige Probe.

#collapseTwo iframe { 
    height: calc(100vh - 160px); 
    width: 100%; 
} 

---

Zusätzlich kann man das Skript in der ersten Probe zu beheben, oder eine Berechnung für das Skript in den zweiten hinzufügen, um die genaue Höhe zu bekommen, oder Swap 4 bis Bootstrap, die auf Flexbox basierten .

Austauschen auf Bootstrap 4 kann es nicht ohne einige Anpassungen lösen, also testen Sie es gründlich, bevor Sie mit einer Migration beginnen.