I have a serious problem with ionic and android 4.3.
I have a list of elements dinamically loaded from a rest service.
When I execute the loadMore function (with the ion-infinite-scroll directive) the view doesn't resize on devices with android 4.3 version (tested on emulator and samsung gt-i9300), making it impossible to scroll over new elements.
I have tried to call the
$ionicScrollDelegate.resize();
on:
success function of $http.get
ng-repeat finish custom directive (even with a timeout of 10 seconds)
with no results.
This is my html code:
<ion-content lazy-scroll >
<ion-refresher
pulling-text="Reload.."
on-refresh="refresh()" >
</ion-refresher>
<div class="list card" ng-repeat="newsItem in newsList" ng-click="goToDetail(newsItem)">
<div class="item item-image myImage">
<img image-lazy-src="{{newsItem.image}}" fallback-src="./img/binewsplaceholder.png">
</div>
<div class="item">
<h2 ng-bind="newsItem.title"></h2>
<categories-in-list categories="newsItem.categories" ></categories-in-list>
<p><i class="ion-calendar myLabel"></i> {{newsItem.date | date: 'dd MMMM yyyy'}}</p>
<p class="text-right" ng-show="newsItem.distance && newsItem.distance != 'NaN' ">
<i class="ion-android-pin myLabel"></i> <span>{{newsItem.distance | number:0}} km</span>
</p>
</div>
</div>
<ion-infinite-scroll
immediate-check="false"
on-infinite="loadMore()"
ng-if="hasMorePage"
distance="1%">
</ion-infinite-scroll>
</ion-content>
Plus, I have the same issue on a "read more" function, that show/hide a div with long text. In that case I found the solution (than removed because of a weak ux) of:
Loading the view with the long text displayed
wait 5-6 second, then hide it
So..
Is this an issue with android 4.3?
I'm not sure, because in another app everything works fine, with the (more or less) same behavior.
Any suggestion?
Thanks.
I have the same issue on my same smartphone. I don't have an idea if this error coming from the Ionic or is a trouble with the device. I found this solution and work fine for me:
Setting overflow-scroll="false" in the ion-content HTML element:
<ion-content overflow-scroll="false">
I hope that has been of helpful.
Related
I've been experiencing the most peculiar error with my Ionic app when running it on Android 10.
The attached gif should pretty much sum up what's the problem but what I can tell is that it's working properly on Android devices with a version lower than ten.
Basically speaking, none of the actual input is echoed to the screen unless I hit some visual divider (ie space). It applies to virtually every text input in the app but the login screen should be enough to get the idea.
Text input on android 10 device:
And to provide some code as well, this would be the affected login code snippet.
<ion-content no-bounce id="login-content">
<img
src="assets/logo/datenpool-logo-blue.svg"
alt="datenpool-logo"
title="datenpool-logo"
id="datenpool-logo"
/>
<form [formGroup]="loginForm">
<div fxLayout="column" fxLayoutAlign="center center">
<ion-input
placeholder="{{ 'authentication.login.form.username' | translate }}"
type="text"
formControlName="username"
[formControl]="loginForm.controls['username']"
required
></ion-input>
<ion-input
placeholder="{{ 'authentication.login.form.password' | translate }}"
type="password"
formControlName="password"
[formControl]="loginForm.controls['password']"
required
></ion-input>
<mat-error *ngIf="isInvalid">
{{ error }}
</mat-error>
<button
(click)="login()"
type="submit"
[disabled]="!loginForm.valid"
class="button"
>
{{ 'authentication.login.form.button' | translate }}
</button>
</div>
</form>
<div fxLayoutAlign="center center">
<button (click)="forgotPassword()" class="forgotpw">
{{ 'authentication.login.forgot-password' | translate }}
</button>
</div>
</ion-content>
Personally I doubt that the code is faulty but rather that it's something to do with Android and its predictive text feature.
At any rate, I hope somebody can point me towards the right direction; thanks in advance, guys.
I managed to find the reason behind the problem.
What I didn't mention is that the project is using Capacitor. And due to that there exists a capacitor.config.json. And in that JSON file there's a dedicated android block with the following properties:
"android": {
"backgroundColor": "#ffffffff",
"allowMixedContent": true,
"captureInput": false,
"webContentsDebuggingEnabled": true
},
What happened was that captureInput was set to true. And what captureInput does is to replace the standard Android keyboard with a simpler one thus enabling devs to use key capture events more easily.
What it apparently also does is to render text input on Android 10 virtually useless.
I have an ionic 3 app working in production on Android.
Now I just build the iOS version but I have a problem with the assets and some ionic components like ion-input.
For example I expect to see that screens:
But, instead I got these:
I already checked the absolute and relative paths for images but I don't have relative paths.
For example I have this type of paths:
<ion-slide class="third-slide">
<div class="flex-container">
<div class="image-container">
<img class="corner-image" src="/assets/img/corner_plants.png" alt="corner">
<img class="center-image" src="/assets/img/mariposa.png" alt="corner">
</div>
<div class="title-container">
<h1 class="title">
Regístrate para comenzar.
</h1>
</div>
<div class="description-container">
<ion-grid class="description-grid">
<ion-row>
<ion-col col-2 class="nav-button-column">
<button class="previous" (click)="onPreviousButtonClick()">
<img src="/assets/img/icons8-chevron_left.png" alt="next">
</button> </ion-col>
<ion-col col-8 class="description-column">
<p class="description">
Meditar te ayudará a cultivar la paciencia, mejorar tu capacidad de adaptación y liberar tensiones.
</p>
</ion-col>
<ion-col col-2></ion-col>
</ion-row>
</ion-grid>
</div>
<div class="access-buttons-container">
<button class="register-button" ion-button block round (tap)="openCreateAccountPage()">
{{ texts.btn_register }}
</button>
<button class="login-button" (tap)="openLoginOptionsPage()">
{{ texts.btn_login }}
</button>
</div>
</div>
</ion-slide>
And another weird thing is that the ionic components are not showing neither. You can see that the register page has three inputs and in the iPhone they don't appear. And I can't see the background image neither.
I researched about this but I could not find anything, because the most of the people only have problems with relative paths. I don't know what is the problem.
PD: Sorry for using images, but it's the only way I can share that.
Anyone can help me, please?
Thanks in advance.
EDIT:
The app works fine if, for example, I do login with facebook and navigate through it. It connects to firebase and then.. the problem is only that I mentioned.
In browsers works fine too.
My html file contains:
</ion-content>
<ion-content class="card-background-page">
<ion-list>
<ion-card ion-item *ngFor="let item of items" (click)="itemTapped($event,item) ">
<img src="{{item.image}}"/>
<div class="card-title">{{item.title}}</div>
<div class="card-subtitle">{{item.subTitle}}</div>
</ion-card>
</ion-list>
</ion-content>
the controller contains this code:
this.items.push(
{title:"Item 1",subTitle:"one",image:"assets/img/preview_1.png"},
{title:"Item 2",subTitle:"two",image:"assets/img/panorama_2.png"}
)
it works well when running in the browser using ionic serve, but once built for Android (with the Ionic Cloud service) the images don't get displayed on the device.
I tried:
1)./assets/img/panorama_2.png instead of assets/img/panorama_2.png
2)<img src="url({{item.image}})"/> instead of <img src="{{item.image}}"/>
but still nothing
Make sure your assets are inside src/assets/img and not inside www/assets/img
I am using ng-show/ng-hide to switch between two different header titles. It works in the browser but does not work in android (4.1) in a cordova app. I also tried using ng-switch and also ng-if, but the same net result.
<ion-modal-view> <<<<< it works OK when not in an $ionicModal
<ion-header-bar>
<h1 class="title" >
<span ng-hide="clipboardMsg">{{title()}}</span>
<span ng-show="clipboardMsg" class="clipboard-msg">{{clipboardMsg}}</span>
</h1>
<button class="button button-clear button-primary" ng-click="close()">Close</button>
</ion-header-bar>
...
Apologies for the cross-post but I will really appreciate some help.
I am using the following code in my Webview along with Jquery Mobile, This works fine in the emulator (2.2 ) and on my Nexus one but some users are complaining that when they click on a link they get an error message "Problem with File: Requested file not found". One user reported that she was using Samsung Fascinate with "2.2.1" . This seems to have started when I upgraded jquery mobile 1.0b2 , I have tried the latest 1.0rc but still have the same issue
Any Insights on what might be happening ?
In my Activity
engine.loadUrl("file:///android_asset/book2/www/newindex.html");
In the html ( I have also tried data-ajax="false" )
<link rel="stylesheet" href="jquery/jquery.mobile-1.0rc1.min.css" />
<script type="text/javascript" src="jquery/jquery.mobile-1.0rc1.min.js"></script>
<div data-role="page" id="jqm-home">
<div data-role="content" data-theme="e">
<div class="content-primary">
<nav>
<ul data-role="listview" data-inset="true" data-theme="e" data-dividertheme="d" >
<li data-role="list-divider">Cognitive</li>
<li><a rel="external" href="./cogn/simon2.html">
<img src="cogn/simon.jpg" />
<h3>Simon says</h3>
<p>Memory</p>
</a></li>
From what I know about URL loading, if you are loading a local file, which is what it looks like here, that file needs to be in the same directory as the file its linking from. Because the file is local on your computer, your device and emulator should work fine. for someone else who downloads the app and tries to use the Webview functionality, that source file would need to be stored in their phone and in the appropriate directory...hope that helps.