Skip to content

Commit efcdd20

Browse files
committed
fix(item): sliding item's width must be 100%
#closes 6239
1 parent 461ba11 commit efcdd20

File tree

3 files changed

+93
-0
lines changed

3 files changed

+93
-0
lines changed

src/components/item/item-sliding.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ ion-item-sliding {
88
position: relative;
99
display: block;
1010
overflow: hidden;
11+
12+
width: 100%;
1113

1214
.item {
1315
position: static;
Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import {Component, ViewChild, ElementRef} from '@angular/core';
2+
import {ionicBootstrap, Platform} from '../../../../../src';
3+
4+
5+
@Component({
6+
templateUrl: 'main.html'
7+
})
8+
class E2EPage {
9+
items: any[] = [];
10+
webview: string;
11+
12+
@ViewChild('content') content: ElementRef;
13+
14+
constructor(platform: Platform) {
15+
for (var i = 0; i < 200; i++) {
16+
this.items.push({
17+
value: i,
18+
someMethod: function() {
19+
return '!!';
20+
}
21+
});
22+
}
23+
24+
if (platform.is('ios')) {
25+
if (window.indexedDB) {
26+
this.webview = ': WKWebView';
27+
28+
} else {
29+
this.webview = ': UIWebView';
30+
}
31+
}
32+
}
33+
34+
headerFn(record: any, index: number, records: any[]) {
35+
if (index % 4 === 0) {
36+
return index + ' is divisible by 4';
37+
}
38+
39+
return null;
40+
}
41+
42+
reload() {
43+
window.location.reload(true);
44+
}
45+
46+
}
47+
48+
49+
@Component({
50+
template: '<ion-nav [root]="root"></ion-nav>'
51+
})
52+
class E2EApp {
53+
root = E2EPage;
54+
}
55+
56+
ionicBootstrap(E2EApp, null, {
57+
prodMode: true
58+
});
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<ion-navbar *navbar>
2+
<ion-title>Virtual Scroll{{webview}}</ion-title>
3+
<ion-buttons end>
4+
<button (click)="reload()">
5+
Reload
6+
</button>
7+
</ion-buttons>
8+
</ion-navbar>
9+
10+
<ion-content>
11+
12+
13+
<ion-list [virtualScroll]="items"
14+
[headerFn]="headerFn">
15+
16+
<ion-item-divider *virtualHeader="let header">
17+
Header: {{header}}
18+
</ion-item-divider>
19+
20+
<ion-item-sliding *virtualItem="let item">
21+
<ion-item>Item: {{item.value}} {{item.someMethod()}}</ion-item>
22+
<ion-item-options>
23+
<button>Archive</button>
24+
</ion-item-options>
25+
<ion-item-options side="left">
26+
<button danger>Remove</button>
27+
</ion-item-options>
28+
</ion-item-sliding>
29+
30+
</ion-list>
31+
32+
33+
</ion-content>

0 commit comments

Comments
 (0)