<ion-item class="item-divider item-icon-left item-icon-right item-avatar item-select viewtask-top">
<p>Type:
<select disabled="true" ng-model="taskDetails.type" ng-change="changeTaskType(taskDetails.type)"
ng-options="taskType as taskType.name for taskType in taskTypes track by taskType.id">
<select>
</p>
</ion-item>
Here I have added disabled="true" for disabling select option. This is working properly for android. But this is not working on iOS. How can I make this code to work on both Android and iOS?
CSS file
.style-disabled {
pointer-events: none;
}
HTML file
<ion-item class="item-divider item-icon-left item-icon-right item-avatar item-select viewtask-top">
<p>Type:
<select class="style-disabled" ng-model="taskDetails.type" ng-change="changeTaskType(taskDetails.type)"
ng-options="taskType as taskType.name for taskType in taskTypes track by taskType.id">
<select>
</p>
</ion-item>
Related
I just implemented swiperjs in my Ionic + Capacitor app and it works great on web and iOS. I have pretty crappy performance on my physical Android device though, really jerky animation from slide to slide.
I created a dummy app using the pure html of each slide and it works well.
See videos below.
I am assuming it is something to do with using *ngIf or variables in the slide template.
I have turned the device offline to make sure it is not doing anything unexpected and there is no change
Any ideas on what could be causing this?
Angular slides - Jerky
https://youtu.be/UYdxmpSUysk
HTML only slides - Smooth
https://youtu.be/d0cUVCydTa0
EDIT:
I have copied the same code below into my demo html only app and it does make it a bit more jerky but nowhere near as much as the main app.
So the ngIfs and ngClass/ngStyles do affect the animation but it must also be something else or just a combination of things.
Not sure if it is related to these issues:
https://github.com/ionic-team/capacitor/discussions/3899
https://bugs.chromium.org/p/chromium/issues/detail?id=1123304
https://github.com/ionic-team/capacitor/issues/4187
My device has webView Chrome v92.0.4515.131
UPDATE:
I have tried adding the following to my androidManifest.xml with no luck
android:largeHeap="true"
android:hardwareAccelerated="true"
Code:
<div class="permit-container" (click)="dismissModal()">
<div #cardContainer class="permit" (click)="$event.stopPropagation();"
[ngClass]="{'permit-bkg-image': permitShowVirtualCardBgImage}"
[ngStyle]="{
'background': permitShowVirtualCardBgImage ? (tenant.style.permitBgColor ? tenant.style.permitBgColor + ', ' + permitBackgroundImage : permitBackgroundImage) : (tenant.style.permitBgColor ? tenant.style.permitBgColor : 'var(--ion-color-permit-card-bk-gradient)')
}"
>
<div *ngIf="isNetworkConnected" class="status-header branded-font-heading-large">
{{member.isActive === true ? tenant.text.textUserTerm + ' #' + member.code : tenant.text.textInactiveAccount ? tenant.text.textInactiveAccount : 'Unpaid'}}
</div>
<div *ngIf="!isNetworkConnected" class="status-header branded-font-heading-large">
Offline - No Connection
</div>
<ion-list *ngIf="member?.isActive" lines="none" [ngClass]="{'ion-list-item-family': member.membershipPackageName === 'Family Membership'}">
<ion-item>
<ion-label class="ion-text-wrap tenant-name branded-font-heading" [ngClass]="{'tenant-name-long': tenant.name.length > 20 }">
{{tenant.name}}
</ion-label>
</ion-item>
<ion-item>
<ion-label class="ion-text-wrap">
<h3>{{member.firstName}} {{member.lastName}}</h3>
</ion-label>
</ion-item>
<ion-item *ngIf="member.membershipPackage && (member.membershipPackageName !== 'Family Membership' || (member.membershipPackageName === 'Family Membership' && member.familyCode))">
<ion-label class="ion-text-wrap">
<h3>Type: {{member.membershipPackage.name}}</h3>
</ion-label>
</ion-item>
<ion-item *ngIf="member.membershipPackageName === 'Family Membership' && member.familyCode">
<ion-label class="ion-text-wrap">
<div class="family-code-container">
<h3>
Family Code: <div class="family-code">{{member.familyCode}}</div>
</h3>
<fa-icon class="icon-copy" [icon]="faCopy" size="2x" (click)="onCopyFamilyCode()"></fa-icon>
</div>
</ion-label>
</ion-item>
<ion-item *ngIf="!member.isSubscriptionMembership">
<ion-label>
<h3>
Expiry: {{member.expiryDate ? (member.expiryDate | date: 'd MMM yy') : ''}}
</h3>
</ion-label>
</ion-item>
<ion-item *ngIf="member.isSubscriptionMembership">
<ion-label>
<h3>
Renewal
{{membershipAppSubscription.dateNextPayment ? (membershipAppSubscription.dateNextPayment | date: 'd MMM yyyy') : ''}}
</h3>
</ion-label>
</ion-item>
</ion-list>
<div *ngIf="member && !member.isActive" class="unpaid-blurb">
{{tenant.text.textWhyRegister}}
</div>
<div *ngIf="!partner" class="logo-container" [ngStyle]="{'background-color': tenant?.style?.permitLogoBgColor ? tenant?.style?.permitLogoBgColor : 'transparent'}">
<ion-img *ngIf="!tenant.isBrandedTenant" [src]=tenant.imageUrlLogo></ion-img>
<ion-img *ngIf="tenant.isBrandedTenant" [src]=tenant.imageUrlLogoLocalTemp></ion-img>
</div>
<app-deal-card *ngIf="partner" [partner]="partner" [isStandalone]="true" [isClickable]="false" [showPermitIcon]="false"></app-deal-card>
</div>
I have a very basic search page with dropdowns and text boxes.
The snippet looks like following
<div class="container" style="width: 100%;">
<div class="row">
<div class="input-group col-sm-4 col-md-4" style="float: left; margin-bottom: 10px; max-width:0px;">
<span class="input-group-addon" id="basic-addon2">Business Name</span>
#Html.LabelFor(m => m.Parameters.BusinessName, new { style = "display: none;" })
#Html.TextBoxFor(m => m.Parameters.BusinessName, new { #maxlength = 50, #class = "form-control", #placeholder = "Enter a business name", #aria_describedby = "basic-addon2", #style = "width:350px;" })
</div>
<div class="input-group col-sm-4 col-md-4" style="float: left; margin-bottom: 10px; max-width:0px;">
#Html.LabelFor(m => m.Parameters.BusinessNameSearchType, new { style = "display: none;" }) #Html.DropDownListFor(m => m.Parameters.BusinessNameSearchType, searchtypes, new { #class = "form-control", #style = "width:150px;" })
</div>
</div>
</div>
And on the page this snippet looks like following.
I use bootstrap 3.3.5 and jQuery 2.1.4.
It works perfectly fine on desktop, android tablet, and android phone, when I use Chrome as a browser.
However, both textbox and dropdown break completely (break as becoming completely unusable) when I try viewing it on the newer versions of iPhone ios Chrome browser.
Interestingly enough, when I tried to emulate it in Chrome as the iPhone X, it worked fine as well.
I am completely new to the whole ios topic. Doing some basic research led me to believe that older versions of bootstrap/jquery might be the issue.
Trying to update to bootstrap 4, which also leads to updating jquery to 3.0.0, completely breaks the whole application, so I had to revert it back.
Before I dive too deep into fighting the whole bootstrap/jquery thing, can anyone please provide me any useful pointers to why ios is so picky? I want to get at least the basic understanding of what the problem is before I start digging into possible solutions.
I have added two example with help of (Bootstrap-4) as your posted instruction.1st - Break textbox and dropdown on mobile.2nd - Not break textbox and dropdown on both Desktop & Mobile.
You can check below snippet.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="py-3">
<div class="container l">
<div class="row">
<div class="col-md-12">
<h5>Textbox & Dropdown (Break on Mobile Screen)</h5>
</div>
<div class="col-md-8 my-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">Business Name</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" placeholder="Enter a business name">
</div>
</div>
<div class="col-md-4 my-2">
<select class="custom-select">
<option>Exact Match</option>
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
</div>
</div>
<br><br>
<div class="row">
<div class="col-md-12">
<h5>Textbox & Dropdown (Not break on Desktop/Mobile Screen)</h5>
</div>
<div class="col-8 my-2 pr-1 pr-md-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">Business Name</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" placeholder="Enter a business name">
</div>
</div>
<div class="col-4 my-2 pl-1 pl-md-3">
<select class="custom-select">
<option>Exact Match</option>
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
</div>
</div>
</div>
</div>
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 have a <ion-item> with <a> inside it. I want the apps go to specific href when the <ion-item> is clicked.
The code is working perfectly in browser emulator (ionic serve), but it cant be clicked on the android real device.
This is my <ion-item> :
<ion-item>
<a href="http://google.com">
<img src="img/ionic.png">
<p>Events</p>
</a>
</ion-item>
Note that the above href goes to external html.
The href is working if i try to go to local html :
<ion-item>
<a href="#/jobs">
<img src="img/ionic.png">
<p>Jobs List</p>
</a>
</ion-item>
I have tried change href to ng-href, i also tried specify the href inside the ion-item tag. None of them is working.
I also tried to change the order of the html :
<a href="http://google.com">
<ion-item>
<img src="img/ionic.png">
<p>Forum</p>
</ion-item>
</a>
Its still not working.
Please kindly help me, Thanks for your help
UPDATE
I also tried to use inappbrowser :
<ion-item>
<a href="#"
onclick="window.open('http://google.com', '_system', 'location=yes'); return false;">
<img src="img/ionic.png">
<p>Guide</p>
</a>
</ion-item>
But no luck on the real device
you can install in-app browser plugin in your cordova http://ngcordova.com/docs/plugins/inAppBrowser/
or if you don't want, just use $window.open('http://google.com', '_system'); in your controller
source : http://forum.ionicframework.com/t/linking-to-an-external-url-and-opening-in-browser/30953
I have an ionic angular template file like this:
<ion-list>
<!-- Search Hotels -->
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="hotelSearch" ng-focus="tap.focus()" ng-blur="tap.blur()">
</label>
</div>
<!-- List of Hotels -->
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="hotel in hotels |filter: hotelSearch | orderBy: '-popularity' | limitTo: 10" type="item-text-wrap" href="#/tab/hotels/{{hotel.id}}" ng-show="tap.tapped">
<img ng-src="">
<h2>{{hotel.name}}</h2>
</ion-item>
It works perfectly when I use it in browser using ionic serve. But fails in android simulator. the ng-focus can be simulated by using on-tap.
What is the equivalent of ng-blur in ionicframework?
This answer pointed me in the right direction: if you defined a similar function in your controller:
$scope.blurCallback = function(){
// do some amazing stuff here ...
}
then in your markup you can use:
<input ... onblur="angular.element(this).scope().blurCallback()">
Just use
onblur="fnx()"
It may work!!