I have a popover with ion-content. That content is replicated over a *ngFor with a maximum height of the ion-content to 400px. When the new content is added (from a user search) the scroll doesn't work properly on iOS. See below:
Chrome and Safari on my computer (working correctly):
On iOS, it is not setting the scroll area properly, same code. What you will see is I try to scroll to see the bottom of the list, but it bounces back up each time as if I were at the bottom of my content:
I tried putting it in an ion-list as well, I don't really want to do that though. It didn't work either.
Here is the HTML (scrollable is verified true, get-user-location class just sets max height to 400px):
<ion-content [scrollY]="scrollable" class="get-user-location">
<form [formGroup]="form">
<h5 padding no-margin *ngIf="message">{{ message }}</h5>
<ion-item>
<ion-input
color="primary"
(keyup.enter)="searchClicked()"
formControlName="search"
></ion-input>
<ion-button (click)="searchClicked()" fill="clear"
><ion-icon onclick="searchClicked()" name="search" slot="icon-only"></ion-icon
></ion-button>
</ion-item>
<ion-item *ngIf="searchStatus">
{{ searchStatus }}
</ion-item>
<ion-radio-group formControlName="radio" (ionSelect)="radioSelected($event)">
<ion-item *ngFor="let searchResult of searchResults; let i = index">
<ion-radio mode="md" value="{{ i }}" margin-end></ion-radio>
<ion-label>{{ searchResult!.name }}</ion-label>
</ion-item>
<ion-item>
<ion-radio mode="md" value="city" margin-end></ion-radio>
<ion-label>Default city listed below</ion-label>
</ion-item>
</ion-radio-group>
<ion-item>
<ion-select
okText="Okay"
cancelText="Dismiss"
formControlName="city"
(ionChange)="cityChanged($event)"
>
<ion-select-option *ngFor="let city of cities" [value]="city.id">
{{ city.name }}
</ion-select-option>
</ion-select>
</ion-item>
<ion-button
*ngIf="showSubmit"
(click)="dismiss()"
[disabled]="!form.valid"
fill="clear"
class="button-padding-start large"
margin
>Submit</ion-button
>
</form>
</ion-content>
It's a bug:
https://github.com/ionic-team/ionic/issues/16910
Remove ion-content and add this to your component's scss:
.backdrop-no-scroll ion-content {
--overflow: hidden;
}
Try
<ion-content no-bounce has-bouncing="false">
...
</ion-content>
I found out that if it's a ionic bug on iOS, there are multiple ways to "resolve" the issue.
(recommended) First:
Add a couple of empty ion-item at the end of the list with the property lines="none" (<ion-item lines="none"></ion-item>)
(I do not recommend) Second:
Set no-bounce has-bouncing="false" to the ion-content
(I do not recommend) Third:
Remove ion content and add to the CSS file .backdrop-no-scroll ion-content { --overflow: hidden; }
Related
i added an icon in a text input, the icon is supposed to be clickable but after adding inside the text input it's no more clickable
<ion-input (ionChange)="inputChanged($event)" [formControlName]="formCtrlName">
<ion-icon [name]='eye-outline' (click)="togglePassword()" class="suffix-icon" </ion-icon>
</ion-input>
You need to place the <icon> element inside the <button> element.
<ion-input (ionChange)="inputChanged($event)" [formControlName]="formCtrlName">
<!-- In Ionic 4 version it is used as follows. -->
<ion-button (click)="clickEventFunction($event, item.id)">
<ion-icon [name]='eye-outline' (click)="togglePassword()" class="suffix-icon"</ion-icon>
</ion-button>
<!-- Used as below before "Ionic 4" release. -->
<button (click)="clickEventFunction($event, item.id)">
<ion-icon [name]='eye-outline' (click)="togglePassword()" class="suffix-icon"</ion-icon>
</button>
</ion-input>
clickEventFunction(event: Event, id: any){
/* Something */
}
References
ion-button
Ionic API Documentation
inside you ts file take a boolean:
showPass: boolean = false;
in html:
<ion-item lines="none">
<ion-input type="{{showPass ? 'text' : 'password'}}" placeholder="Password" (ionChange)="inputChanged($event)" [formControlName]="formCtrlName"></ion-input>
<ion-icon name="eye-outline" slot="end" *ngIf="!showPass" (click)="showPass = !showPass"></ion-icon>
<ion-icon name="eye-off-outline" slot="end" *ngIf="showPass" (click)="showPass = !showPass"></ion-icon>
</ion-item>
A simple way of making a clickable icon in an ion input.
i want to position a div with the id "first" to the right of another div with the id "second" how to do that ?
<ion-col>
<div id="second">
<ion-img src="./assets/images/from_to.svg" style="height:30%;width:10%;"></ion-img>
</div>
<div id="first">
<ion-label>Domicile</ion-label>
<ion-label >120 Square de la Couronne,Paris</ion-label>
</div>
</ion-col>
First of all, I suggest you lessen the use of the basic html, for example, try using instead of .
Second, you practically never use id with html tags.
Now to answer your question, a little bit more code would help but here's one solution:
HTML:
<ion-col>
<ion-item class="second">
<ion-image class="img" src="/assets/images/from_to.svg" />
</ion-item>
<ion-item class="first">
<ion-label>Domicile</ion-label>
<ion-label>120 Square de la Couronne,Paris</ion-label>
</ion-item>
</ion-col>
CSS:
.first{
float: right;
}
.second{
float:left;
}
I assume that you already know that "HTML" goes to your x.page.html and the "CSS" goes to your x.page.scss of the same folder.
Looks like you want to create a list containing an image with an description on the right side on every element. If that's the case try ion-list which offers interacting with the list elements much easier, since you can use the included swiping, dragging within the list, and deleting items.
Example:
<ion-list>
<ion-item>
<ion-avatar slot="start">
<ion-img src="./assets/images/from_to.svg"></ion-img>
</ion-avatar>
<ion-label>
<h2>Domicile</h2>
<p>120 Square de la Couronne,Paris</p>
</ion-label>
</ion-item>
<ion-item>
<ion-avatar slot="start">
<ion-img src="./assets/images/from_to.svg"></ion-img>
</ion-avatar>
<ion-label>
<h2>Domicile</h2>
<p>120 Square de la Couronne,Paris</p>
</ion-label>
</ion-item>
</ion-list>
Is there a way I can remove the entire image element from DOM when 403 error occurs to that image while fetching it from the API so that the title of the card is expanded to the whole width of the card.
This is what I tried so far
HTML
<div *ngFor="let item of items">
<ion-row>
<ion-col>
<div>{{ item.title }}</div>
</ion-col>
<ion-col size="4" class="ion-text-center">
<img src="{{ item.imageurl }}" (error)="handleImageError($event)" />
</ion-col>
</ion-row>
</div>
TS
handleImageError(e) {
e.target.style.display = 'none';
}
I have created a working example using StackBlitz. Could anyone please help.
You are looking for *ngIf on image container, as it removes / adds the element from the DOM. And you will also have to slightly modify the handleImageError.
StackBlitz
<div *ngFor="let item of items">
<ion-row>
<ion-col>
<div>{{ item.title }}</div>
</ion-col>
<ion-col *ngIf="!item.hide" size="4" class="ion-text-center">
<img [src]="item.imageurl" (error)="handleImageError(item)" />
</ion-col>
</ion-row>
</div>
And then in the script, in the handleImageError - do this:
items = [
{imageUrl: '5353ssa.png'},
{imageUrl: 'https://latam.kaspersky.com/content/es-mx/images/product-icon-KSOS.png'},
{imageUrl: '5353ssa.png'},
{imageUrl: '5353ssa.png'},
]
handleImageError(image) {
image.hide = true;
}
Your problem is about your container. U have two columns. Then u will hide column instead of image. U can use ngIf
https://stackblitz.com/edit/ionic-a5wy8u
<ion-col *ngIf="!car.isSHOW">
<ion-card-content>
<img src="{{car.url}}" (error)="handleImageError(car)">
</ion-card-content>
</ion-col>
in component change its to true
handleImageError(e) {
e.isSHOW = true;
}
I would suggest you to use ngIf to hide the complete image, the way I would have address this is
Create a boolean variable at the top of your component.
let shouldHide = false;
Use this variable and ngIf at your image, you can use this at the container level or the image level itself like.
<img src="{{ imageurl }}" (error)="handleImageError($event)" *ngIf="shoudHide"/>
Assign true in case of error
handleImageError(e) {
e.target.style.display = 'none';
this.shouldHide = true;
}
Hope it helps
<ion-list>
<div>
<ion-list>
<div *ngFor="let itinerary of filteredItineraries">
<ion-card class="itinerary-module">
<ion-card-content *ngIf="itinerary.id !== selection.id">
<div>
<h2>{{itinerary.startDate | date: "MM/dd/yyyy"}} - {{itinerary.endDate | date: "MM/dd/yyyy"}}</h2>
</div>
<div>
<h1>{{itinerary.jobDesc}}</h1>
</div>
<div>
<h2>{{itinerary.jobCode}}</h2>
</div>
<ion-item lines="none">
<ion-icon slot="start" name="thumbs-down" (click)="removeItem(itinerary.id)></ion-icon>
<ion-icon slot="end" name="thumbs-up" (click)="removeItem(itinerary.id)" ></ion-icon>
</ion-item>
</ion-card-content>
</ion-card>
</div>
</ion-list>
</div>
</ion-list>
Is there a way to only display this list one item at a time...say index 0, then when I click one of the icons to remove the current item in index 0 so that index 1 then moves to 0 and is displayed on the screen?
Do not iterate over the loop and render. Just point the UI to first element filteredItenaries[0]
If you want to show the next item, call a function which has the implementation filteredIternaries.splice(0,1). So, therefore, the first element will be updated in the Array as well as in the UI.
I have created a form. but how to get selected values in function.
i used dropdown, in that selected value need to send to the function.
product_option[{{tms.productoption_id}}],
optnslist.product_optionvalue_id this two value need to send to function
Html code:
<form (ngSubmit)="logForm(myfoem)">
<ion-grid *ngIf="varibleprd == 'variable'">
<ion-item *ngFor="let tms of optionprd;">
<ion-label>{{tms.option_name}}:</ion-label>
<ion-select [(ngModel)]="tms.option_name" name="product_option[{{tms.productoption_id}}]">
<ion-option *ngFor="let optnslist of tms.optionvalue" [value]="optnslist.product_optionvalue_id">{{optnslist.optionvalue_name}}</ion-option>
</ion-select>
</ion-item>
</ion-grid>
<button block><ion-icon name="add"></ion-icon></button>
</form>
and Ts code:
export class ProductdetailPage {
frmdata:any;
subfrmdata:any;
logForm(subfrmdata){
this.frmdata=subfrmdata.value;
console.log(this.frmdata);
}
}
Please try the below. This might help you:-
In HTML file
<ion-option *ngFor="let optnslist of tms.optionvalue" [value]="optnslist.product_optionvalue_id"
(ionSelect)="logForm(product_option[tms.productoption_id], optnslist.product_optionvalue_id);">
{{optnslist.optionvalue_name}}</ion-option>
Then in the ts file:-
logForm(productoption_id, product_optionvalue_id){
// Do the needful
}