滚动条不会出现在离子弹出框上[关闭]

Question

在我的home.html 中，我包含了popover 页面。我面临的问题是，里面有很多内容，它没有显示任何滚动条并走出页面。

如何在页面上获得滚动条？下面是我的home.html 页面截图，上面有popover。

下面是popoverpage.html代码：

<ion-content padding>
  <ion-grid fixed>
    <ion-row>
<!-- <ion-col size="12">
  This is example of popup
</ion-col> -->
    </ion-row>
    <ion-row>

<ion-col size="12">
  <ion-button (click)="closepopup()" expand="block" fill="clear" shape="round" color="danger">
    Close
  </ion-button>
</ion-col>


</ion-row> 


<!--change stage starts-->
<ion-item (click)="changestage()">
  <ion-label>Change Stage</ion-label>
</ion-item>
<br>

<ion-list *ngIf="showstage == true">
  <ion-item> 
    <ion-label>Lead Stage</ion-label>
    <ion-select  okText="Okay" cancelText="Dismiss" [(ngModel)]="dropdown2" >
      <ion-select-option *ngFor="let list of leadstagelist" value="{{list.name}}" checked="true">
        {{list.name}}
      </ion-select-option>
    </ion-select>
  </ion-item>
</ion-list>

<ion-button (click)="change_leadstage()" expand="block"  shape="round" color="danger" *ngIf="showstage == true">
      Update Stage
</ion-button>
<!--change stage ends-->


<!--change owner starts-->
<ion-item (click)="changestage_owner()">
  <ion-label>Change Owner</ion-label>
</ion-item>
<br>

<ion-list *ngIf="showstage_o == true">
  <ion-item> 
    <ion-label>Lead Owner</ion-label>
    <ion-select  okText="Okay" cancelText="Dismiss" [(ngModel)]="dropdown3">
      <ion-select-option *ngFor="let list of students" value="{{list.authId}}" checked="true">
        {{list.Name}}
      </ion-select-option>
    </ion-select>
  </ion-item>
</ion-list>

<ion-button (click)="change_leadowner()" expand="block"  shape="round" color="danger" *ngIf="showstage_o == true">
      Update Owner
</ion-button>
<!--change owner ends-->


<!--Add activity starts-->
<ion-item (click)="changestage_activity()">
  <ion-label>Add Activity</ion-label>
</ion-item>
<br>

<ion-list *ngIf="addActivity_o == true">
  <ion-item> 
    <ion-label>Lead Activity Note</ion-label>
    <br>
<ion-input type="text" placeholder="Awesome Input" [(ngModel)]="val1"></ion-input>
  </ion-item>
</ion-list>

<ion-button (click)="addActivity()" expand="block"  shape="round" color="danger" *ngIf="addActivity_o == true">
      Add
</ion-button>
<!--Add activity ends-->

<!--Add follow uo starts-->
<ion-item (click)="changestage_followup()">
  <ion-label>Add Follow up</ion-label>
</ion-item>
<br>

<ion-list *ngIf="followup_o == true">
  <ion-item> 
    <ion-label>Lead Followup Note</ion-label>
    <br>
<ion-input type="text" placeholder="Awesome Input" [(ngModel)]="val2"></ion-input>
  </ion-item>
  <br>
  <ion-item> 
    <ion-label>Lead Followup Date</ion-label>
    <br>
<!-- <ion-input type="text" placeholder="Awesome Input" [(ngModel)]="val3"></ion-input> -->

<ion-datetime value="2020-02-19" placeholder="Select Date" [(ngModel)]="val3"></ion-datetime>
  </ion-item>

  <ion-label>Start Time</ion-label>
  <ion-datetime display-format="h:mm A" picker-format="h:mm A" value="1990-02-19T07:43Z"></ion-datetime>

</ion-list>

<ion-button (click)="addFollowup()" expand="block"  shape="round" color="danger" *ngIf="followup_o == true">
      Add
</ion-button>
<!--Add follow up ends-->


  </ion-grid>



</ion-content>

Answer 1

看看添加这些全局css规则是否有效

  .backdrop-no-scroll ion-content {
    --overflow: hidden;
  }
  .backdrop-no-scroll ion-backdrop+* ion-content {
    --overflow: visible;
  }

取自thread