iFrame height issue

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>

Hello, anyone anything?

Apply height as 100% to div, ion-card, ion-card-content and iframe.

Thanks for your reply. It doesn’t seem to work. The only height value that makes my iframe bigger is height: -webkit-fill-available; or when making it fixed e.g height: 500px;.
height: 100%; makes it even smaller than height: -webkit-fill-available; I am not sure why.

Have you applied height:100% to ion-card and also to ion-card content? And also to Div?

I did, it doesn’t seem to be working

Please check the screen and my code.

  <div *ngIf="showReservationAccordion" style="height:100%">
    <ion-card style="height:100%">
      <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 ;height:100%;
        background-color:white; padding: 0;">
        <iframe style="width:100%; height:100%" src="http://www.youtube.com/embed/" frameborder="0" allowfullscreen>
        </iframe>
      </ion-card-content>
    </ion-card>
  </div>```

Thanks for your reply. I have followed steps exactly as you did but with no luck. It works on iOS with version of 12 indeed but on newer ones no… strange. Best results I get when set height:-webkit-fill-available. It still doesn’t make iframe take whole screen but it is bigger comparing when using height:100%;. I am not sure what is happening here.