No lines are shown between ion-item

Ionic Framework ionic-v3
1

Hello,

I have two projects with almost same code but with different config.xml and package.json.

  1. Project: No lines are shown between ion-items. Build for prod works for ios.
  2. Project: Lines are shown between ion-items. Build for prod does not work for ios.
    It’s really strange… I’m on the problem for several days and have no solution please help to get work one of the projects at least.

Here are for each project the package.json and config.xml…

1. Project
package.json

{
  "name": "XXX",
  "author": "XXX",
  "homepage": "XXX",
  "private": true,
  "version": "1.0",
  "config": {
    "ionic_webpack": "./config/webpack.config.js"
  },
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.4.3",
    "@angular/compiler": "4.4.3",
    "@angular/compiler-cli": "4.4.3",
    "@angular/core": "4.4.3",
    "@angular/forms": "4.4.3",
    "@angular/http": "4.4.3",
    "@angular/platform-browser": "4.4.3",
    "@angular/platform-browser-dynamic": "4.4.3",
    "@angular/platform-server": "4.1.3",
    "@ionic-native/core": "3.12.1",
    "@ionic-native/splash-screen": "3.12.1",
    "@ionic-native/status-bar": "3.12.1",
    "@ionic/storage": "^2.0.1",
    "@types/lodash": "^4.14.42",
    "angular2-cookie": "1.2.6",
    "cordova-android": "^6.2.3",
    "cordova-ios": "^4.4.0",
    "cordova-plugin-camera": "^2.3.1",
    "cordova-plugin-compat": "^1.1.0",
    "cordova-plugin-console": "~1.0.4",
    "cordova-plugin-device": "~1.1.3",
    "cordova-plugin-splashscreen": "~4.0.0",
    "cordova-plugin-statusbar": "~2.2.0",
    "cordova-plugin-whitelist": "~1.3.0",
    "cordova-sqlite-storage": "^2.0.4",
    "d3-ng2-service": "^1.5.2",
    "ionic-angular": "3.9.2",
    "ionic-plugin-keyboard": "~2.2.1",
    "ionicons": "3.0.0",
    "lodash": "^4.17.4",
    "ng2-translate": "5.0.0",
    "rxjs": "5.5.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.17"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.0.0",
    "rollup-plugin-replace": "^1.1.1",
    "typescript": "2.3.4"
  }
}

config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.myapp" version="1.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>XXX</name>
    <description>To see deep in the sea</description>
    <author XXX</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <platform name="windows">
        <splash src="resources/windows/SplashScreen.scale-100.png" target="SplashScreen" />
        <splash src="resources/windows/SplashScreenPhone.scale-100.png" target="SplashScreenPhone" />
    </platform>
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="16" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashScreenDelay" value="0" />
    <preference name="FadeSplashScreen" value="false" />
    <preference name="FadeSplashScreenDuration" value="0" />
    <preference name="windows-target-version" value="10.0" />
    <preference name="SplashScreenBackgroundColor" value="0xFFFFFFFF" />
    <allow-navigation href="http://*/" />
    <allow-navigation href="http://localhost:8100" />
    <engine name="ios" spec="^4.4.0" />
    <plugin name="cordova-plugin-console" spec="~1.0.4" />
    <plugin name="cordova-plugin-device" spec="~1.1.3" />
    <plugin name="cordova-plugin-splashscreen" spec="~4.0.0" />
    <plugin name="cordova-plugin-statusbar" spec="~2.2.0" />
    <plugin name="cordova-plugin-whitelist" spec="~1.3.0" />
    <plugin name="cordova-sqlite-storage" spec="^2.0.4" />
    <plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
</widget>

2. Project
package.json

{
  "name": "XXX",
  "version": "1.0",
  "author": "XXX",
  "private": true,
  "config": {
    "ionic_webpack": "./config/webpack.config.js"
  },
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.4.6",
    "@angular/compiler": "4.4.6",
    "@angular/compiler-cli": "4.4.6",
    "@angular/core": "4.4.6",
    "@angular/forms": "4.4.6",
    "@angular/http": "4.4.6",
    "@angular/platform-browser": "4.4.6",
    "@angular/platform-browser-dynamic": "4.4.6",
    "@ionic-native/core": "4.4.2",
    "@ionic-native/splash-screen": "4.4.2",
    "@ionic-native/status-bar": "4.4.2",
    "@ionic/storage": "^2.1.3",
    "@ngx-translate/core": "^7.2.2",
    "@ngx-translate/http-loader": "^2.0.0",
    "angular2-cookie": "^1.2.6",
    "cordova-browser": "^4.1.0",
    "ionic-angular": "3.9.2",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "rxjs": "^5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "^1.5.5",
    "@ionic/app-scripts": "^3.1.2",
    "typescript": "2.3.3"
  }
}

config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.myapp" version="1.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>XXX</name>
    <author email="XXX"></author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <preference name="ScrollEnabled" value="false" />
    <preference name="android-minSdkVersion" value="16" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="3000" />
    <allow-navigation href="http://*/" />
    <allow-navigation href="http://localhost:8100" />
    <platform name="android">
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
        <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
        <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
        <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
    </platform>
    <plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
    <plugin name="cordova-plugin-whitelist" spec="1.3.1" />
    <plugin name="cordova-plugin-device" spec="1.1.4" />
    <plugin name="cordova-plugin-splashscreen" spec="~4.0.1" />
    <plugin name="cordova-plugin-ionic-webview" spec="^1.1.11" />
</widget>
2

I think you put *ngFor =“let item of items” (or other data provider loop command) inside ‘ion-list’ tag…
you should put that inside opening ion-item tag.
Otherwise it will loop ion-list instead of ion-item. Then of course you will not see the white line which is a part of ion-item.

3

Here is an example of which is used in both projects.
In 1. Project no line is shown between the ion items. In the other project for the same is a line shown. It is really strange.

<ion-header>
  <ion-navbar>
    <ion-title>{{ 'SEARCH' | translate }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-item>
    <ion-label>{{ 'CAR' | translate }}</ion-label>
    <ion-select [(ngModel)]="selectedCar" (ngModelChange)="carChanged($event)">
      <ion-option *ngFor="let car of cars">{{car}}</ion-option>
    </ion-select>
  </ion-item>

  <ion-item>
    <ion-label>{{ 'COUNTRY' | translate }}</ion-label>
    <ion-select [(ngModel)]="selectedCountry">
      <ion-option *ngFor="let country of countries">{{country}}</ion-option>
    </ion-select>
  </ion-item>
</ion-content>

İs any version of one of the used plugins old in 1. Project ?

4

Try this:

<ion-content padding>
  <ion-item *ngFor="let car of cars">
    <ion-label>{{ 'CAR' | translate }}</ion-label>
    <ion-select [(ngModel)]="selectedCar" (ngModelChange)="carChanged($event)">
      <ion-option>{{car}}</ion-option>
    </ion-select>
  </ion-item>

  <ion-item  *ngFor="let country of countries">
    <ion-label>{{ 'COUNTRY' | translate }}</ion-label>
    <ion-select [(ngModel)]="selectedCountry">
      <ion-option>{{country}}</ion-option>
    </ion-select>
  </ion-item>
</ion-content>
5

The both codes are not the same. Your code creates for each car one item with one option. But I try it anyway and same behaviour.

6

Weird…
I had the same problem and I could fix it by adding *ngFor inside ion-item tag.

This is not because of ionic version.

Try to add a demo ion-item inside ion-content manually:

<ion-item>
  <p>item 01</p>
  <p>demo content</p>
</ion-item>

If this shows lines, then it’s error in your coding.

7

I try it but see no lines.Unbenannt
But after I update some plugin versions it will work… this is really strange…