iFrame height issue

@maid wrote:

Hello,

Has anyone had an issue with iframe height. I am trying to make it take its full height. In my example, I placed iframe inside an accordion, when accordion is shown, iframe appears but with lot of scrolling in it. If I set height property of iframe to specific pixels, it works but it is not propper solution, preferred would be to automatically set its full height.

I would be very thankful to hear Your comment about this.

<div *ngIf="showReservationAccordion">
      <ion-card>
        <ion-card-header style="color:white;" (click)="toggleAccordion()">
          <ion-grid style="--ion-grid-padding: 0px; color:white;">
            <ion-row style="align-items: center;">
              <ion-col style="--ion-grid-column-padding:0px; margin-top: -2px;">
                <ion-label style="font-size:14pt; font-family: 'Fjalla One'">OPEN ACCORDION</ion-label>
              </ion-col>
              <ion-col size="1" style="--ion-grid-column-padding:0px;  margin-top: -5px;">
                <ion-icon [ngStyle]="{'transform':!accordionExpanded ? 'rotateZ(-180deg)' : 'rotateZ(0deg)'}" mode="md"
                  name="arrow-dropup" style="transition: all 0.4s ease;
                  float: right;
                  margin-top: 2px;"></ion-icon>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-card-header>

        <ion-card-content [ngStyle]="{'display':accordionExpanded ? 'block' : 'none'}" style="border-radius: 0px 0px 29px 29px ;
        background-color:white; padding: 0;">
          <iframe style="width:100%; height:-webkit-fill-available"
            src="https://www.w3schools.com" frameborder="0"
            allowfullscreen>
          </iframe>
        </ion-card-content>
      </ion-card>
    </div>

Posts: 1

Participants: 1

Read full topic