ionic 6 : Modal Controller not scrolling

Question

I Have a ionic modal controller which is displayed on click of a button. For me the modal is not scrolling if the ion-item in the modal component is having dettails from an object array. I am not able to see rest of the list whic is not displayed intially in the screen.

Modal Controller

    console.log('Called');

    this.modalController
      .create({
        component: CagesComponent,
        breakpoints: [0.75],
        initialBreakpoint: 0.75,
        showBackdrop: true,
        backdropDismiss: true,
      })
      .then((modalEl) => {
        modalEl.present();
        return modalEl.onDidDismiss();
      })
      .then((resultData) => {
        console.log(resultData.data, resultData.role);
        if (resultData.role === 'confirm') {
          this.form.get('cageNo').setValue(resultData.data);
        }
      });
  }

cages.component.html

<ion-list>
  <ion-item button (click)="onCageSelect(cage)" *ngFor="let cage of cages">
    <ion-thumbnail slot="start" >
      <img [src]="cage.cageImg">
    </ion-thumbnail>
    <div class="item-desc">
      <h4>{{cage.name}}({{cage.type}})</h4>
      <h6>{{cage.description}}</h6>
    </div>
  </ion-item>
</ion-list>
</div>

cages.component.ts

import { IonicModule, ModalController } from '@ionic/angular';
import { Cage } from 'src/app/cage/cage.model';
import { CageService } from 'src/app/cage/cage.service';

@Component({
  selector: 'app-cages',
  templateUrl: './cages.component.html',
  styleUrls: ['./cages.component.scss'],
})
export class CagesComponent implements OnInit {
  cages: Cage[] = [];
  constructor(
    public cageSrvc: CageService,
    public modalCtrl: ModalController
  ) {}

  ngOnInit() {
    this.cageSrvc.getCages().subscribe((cages) => {
      this.cages = cages;
    });
  }

  onCageSelect(cage: Cage) {
    console.log(cage.name);
    this.modalCtrl.dismiss(cage.name, 'confirm');
  }
}

score 0 · Answer 1 · answered Feb 27 '22 at 13:51

0

Place all your contents inside ion-content.

<ion-content>
  <!-- Your contents-->
</ion-content>

answered Feb 27 '22 at 13:51

mani kandan

399
2
6

score 0 · Answer 2 · answered Oct 28 '22 at 20:59

Ion-content didnt solve my problem, it didnt even show up my modal anymore. What I did was wrapping all my content on a container with the following css:


.helper-container {
    height: 85vh;
    overflow-y: scroll;
  }

Adust height to whatever value you choose.

score 0 · Answer 3 · answered Apr 14 '23 at 13:40

0

I solved with:

ion-modal ion-content {
--offset-top: unset !important;
--offset-bottom: unset !important;
overflow: auto !important;
}

answered Apr 14 '23 at 13:40

JuanPablo Code

1

score 0 · Answer 4 · answered Aug 28 '23 at 10:08

0

You can also set the --overflow variable, which the ionic modal uses to set the overflow css property.

answered Aug 28 '23 at 10:08

James Jenkinson

1,563
2
16
33

ionic 6 : Modal Controller not scrolling

4 Answers4