Hello everyone,
with the application I am building in Ionic 2, I have different rendering outputs
-
On android 6.0 emulator (the google one), and on the browser, the main list content is left-justified :
-
On android 4.2.2 device and emulator the main list content is this time centered
According to me, android below 5.0 may have a different webview renderer that in highest versions, but anyway, how can I solve this issue, I mean how can I target different android versions with css ? Also, as I am not very good at css, what is the best way to adapt content on android 4.2.2 for example ?
My project github repository : the relevant commit.
This is my app/pages/home/home.html
<ion-toolbar primary>
<ion-title>
Home
</ion-title>
</ion-toolbar>
<ion-content class="home">
<ion-list>
<div ion-item *ngFor="let item of getFiles()">
<img src="{{getPicturePathForItem(item)}}" [width]="getFileTypeIconSize()" [height]="getFileTypeIconSize()"/>
{{item.name}}
</div>
</ion-list>
</ion-content>
<ion-toolbar primary position="bottom">
<ion-title>
Footer
</ion-title>
</ion-toolbar>
This is my /app/pages/home/home.ts
import {Page, Platform} from 'ionic-angular';
interface FileItem {
name:string;
isDirectory:boolean;
}
@Page({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
private files:Array<FileItem>;
private minScreenSize:number;
private fileTypeIconSize:number;
constructor(platform:Platform){
this.minScreenSize = platform.width() < platform.height() ? platform.width() : platform.height();
this.fileTypeIconSize = this.minScreenSize * 0.10;
this.files = [
{name: "ex02.fen", isDirectory:false},
{name: "test05", isDirectory:true},
{name: "test03", isDirectory:true},
{name: "ex04.fen", isDirectory:false},
{name: "test01", isDirectory:true},
{name: "ex03.fen", isDirectory:false},
{name: "ex01.fen", isDirectory:false},
{name: "test02", isDirectory:true},
{name: "ex05.fen", isDirectory:false},
{name: "test04", isDirectory:true},
{name: "ex06.fen", isDirectory:false},
{name: "test06", isDirectory:true},
{name: "ex07.fen", isDirectory:false},
{name: "ex08.fen", isDirectory:false},
{name: "ex09.fen", isDirectory:false},
{name: "ex10.fen", isDirectory:false},
{name: "ex11.fen", isDirectory:false},
{name: "ex12.fen", isDirectory:false},
{name: "ex13.fen", isDirectory:false},
{name: "ex14.fen", isDirectory:false},
{name: "ex15.fen", isDirectory:false},
{name: "ex16.fen", isDirectory:false},
];
}
public getFiles():Array<FileItem> {
return this.files;
}
public getPicturePathForItem(item:FileItem):string {
if (item.isDirectory){
return 'build/images/folder.png';
}
else {
return 'build/images/file.png';
}
}
public getFileTypeIconSize():number {
return this.fileTypeIconSize;
}
}
Thanks in advance.