Skip to content

Commit c801d18

Browse files
brandyscarneybrandyscarney
committed
fix(popover): allow popover to have an ion-content wrapping it
1 parent f8d1103 commit c801d18

File tree

2 files changed

+61
-60
lines changed

2 files changed

+61
-60
lines changed

‎src/components/popover/popover.scss

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,7 @@ ion-popover {
3636

3737
min-height: 200px;
3838

39-
ion-page {
39+
scroll-content {
4040
position: relative;
41-
display: flex;
42-
43-
height: auto;
4441
}
4542
}

‎src/components/popover/test/basic/index.ts

Lines changed: 60 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -4,58 +4,60 @@ import {ionicBootstrap, Popover, NavController, Content, NavParams, ViewControll
44

55
@Component({
66
template: `
7-
<ion-list radio-group [(ngModel)]="fontFamily" (ionChange)="changeFontFamily()">
8-
<ion-row>
9-
<ion-col>
10-
<button (click)="changeFontSize('smaller')" ion-item detail-none class="text-button text-smaller">A</button>
11-
</ion-col>
12-
<ion-col>
13-
<button (click)="changeFontSize('larger')" ion-item detail-none class="text-button text-larger">A</button>
14-
</ion-col>
15-
</ion-row>
16-
<ion-row class="row-dots">
17-
<ion-col>
18-
<button (click)="changeBackground('white')" category="dot" class="dot-white" [class.selected]="background == 'white'"></button>
19-
</ion-col>
20-
<ion-col>
21-
<button (click)="changeBackground('tan')" category="dot" class="dot-tan" [class.selected]="background == 'tan'"></button>
22-
</ion-col>
23-
<ion-col>
24-
<button (click)="changeBackground('grey')" category="dot" class="dot-grey" [class.selected]="background == 'grey'"></button>
25-
</ion-col>
26-
<ion-col>
27-
<button (click)="changeBackground('black')" category="dot" class="dot-black" [class.selected]="background == 'black'"></button>
28-
</ion-col>
29-
</ion-row>
30-
<ion-item class="text-athelas">
31-
<ion-label>Athelas</ion-label>
32-
<ion-radio value="Athelas"></ion-radio>
33-
</ion-item>
34-
<ion-item class="text-charter">
35-
<ion-label>Charter</ion-label>
36-
<ion-radio value="Charter"></ion-radio>
37-
</ion-item>
38-
<ion-item class="text-iowan">
39-
<ion-label>Iowan</ion-label>
40-
<ion-radio value="Iowan"></ion-radio>
41-
</ion-item>
42-
<ion-item class="text-palatino">
43-
<ion-label>Palatino</ion-label>
44-
<ion-radio value="Palatino"></ion-radio>
45-
</ion-item>
46-
<ion-item class="text-san-francisco">
47-
<ion-label>San Francisco</ion-label>
48-
<ion-radio value="San Francisco"></ion-radio>
49-
</ion-item>
50-
<ion-item class="text-seravek">
51-
<ion-label>Seravek</ion-label>
52-
<ion-radio value="Seravek"></ion-radio>
53-
</ion-item>
54-
<ion-item class="text-times-new-roman">
55-
<ion-label>Times New Roman</ion-label>
56-
<ion-radio value="Times New Roman"></ion-radio>
57-
</ion-item>
58-
</ion-list>
7+
<ion-content>
8+
<ion-list radio-group [(ngModel)]="fontFamily" (ionChange)="changeFontFamily()">
9+
<ion-row>
10+
<ion-col>
11+
<button (click)="changeFontSize('smaller')" ion-item detail-none class="text-button text-smaller">A</button>
12+
</ion-col>
13+
<ion-col>
14+
<button (click)="changeFontSize('larger')" ion-item detail-none class="text-button text-larger">A</button>
15+
</ion-col>
16+
</ion-row>
17+
<ion-row class="row-dots">
18+
<ion-col>
19+
<button (click)="changeBackground('white')" category="dot" class="dot-white" [class.selected]="background == 'white'"></button>
20+
</ion-col>
21+
<ion-col>
22+
<button (click)="changeBackground('tan')" category="dot" class="dot-tan" [class.selected]="background == 'tan'"></button>
23+
</ion-col>
24+
<ion-col>
25+
<button (click)="changeBackground('grey')" category="dot" class="dot-grey" [class.selected]="background == 'grey'"></button>
26+
</ion-col>
27+
<ion-col>
28+
<button (click)="changeBackground('black')" category="dot" class="dot-black" [class.selected]="background == 'black'"></button>
29+
</ion-col>
30+
</ion-row>
31+
<ion-item class="text-athelas">
32+
<ion-label>Athelas</ion-label>
33+
<ion-radio value="Athelas"></ion-radio>
34+
</ion-item>
35+
<ion-item class="text-charter">
36+
<ion-label>Charter</ion-label>
37+
<ion-radio value="Charter"></ion-radio>
38+
</ion-item>
39+
<ion-item class="text-iowan">
40+
<ion-label>Iowan</ion-label>
41+
<ion-radio value="Iowan"></ion-radio>
42+
</ion-item>
43+
<ion-item class="text-palatino">
44+
<ion-label>Palatino</ion-label>
45+
<ion-radio value="Palatino"></ion-radio>
46+
</ion-item>
47+
<ion-item class="text-san-francisco">
48+
<ion-label>San Francisco</ion-label>
49+
<ion-radio value="San Francisco"></ion-radio>
50+
</ion-item>
51+
<ion-item class="text-seravek">
52+
<ion-label>Seravek</ion-label>
53+
<ion-radio value="Seravek"></ion-radio>
54+
</ion-item>
55+
<ion-item class="text-times-new-roman">
56+
<ion-label>Times New Roman</ion-label>
57+
<ion-radio value="Times New Roman"></ion-radio>
58+
</ion-item>
59+
</ion-list>
60+
</ion-content>
5961
`,
6062
})
6163
class PopoverRadioPage {
@@ -155,10 +157,12 @@ class PopoverListPage {
155157

156158
@Component({
157159
template: `
158-
<ion-list>
159-
<ion-list-header>Ionic</ion-list-header>
160-
<button ion-item *ngFor="let item of items">Item {{item}}</button>
161-
</ion-list>
160+
<ion-content>
161+
<ion-list>
162+
<ion-list-header>Ionic</ion-list-header>
163+
<button ion-item *ngFor="let item of items">Item {{item}}</button>
164+
</ion-list>
165+
</ion-content>
162166
`
163167
})
164168
class PopoverLongListPage {

0 commit comments

Comments
 (0)