在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>
查看添加这些全局css规则是否可行
.backdrop-no-scroll ion-content {
--overflow: hidden;
}
.backdrop-no-scroll ion-backdrop+* ion-content {
--overflow: visible;
}
来自此thread