I have a page which contains ion-slides with loop enabled. Each slide is generated with *ngFor and each one contains a checkbox. The problem I am facing is that the checkbox is not getting checked on first and last slides. I have found that its because there are duplicate slides for the first slide and last slide so clicking on the checkbox is not triggering it since there are duplicates for the same. I have tried giving Id to checkbox to make it unique but since the slides are generated dynamically whatever change I give is also getting replicated. Is there any workaround for this? Any help is much appreciated.
Thank you
Here is my code
HTML part
<ion-slides pager='true' loop="true">
<ion-slide *ngFor="let slide of demoData">
<ion-card>
<ion-card-header>{{slide}}</ion-card-header>
<ion-card-content>
<ion-checkbox></ion-checkbox>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-slides>
Ts Part
demoData = ['1', '2', '3'];
Related
We are trying to put checkbox and a button in the same row for our android application. We are using Ionic 4 and Cordova 9 to build the Andriod Application.
so we have used the following code snippet:
<ion-content>
<ion-item-sliding *ngFor="let test of testList">
<ion-item>
<!-- check box to select user-->
<ion-checkbox color="secondary" [(ngModel)]="test.testId"
(click)="selectUser(test .testId )" ng-true-value="right" ng-false- value="wrong" > </ion-checkbox>
<!-- button to view user-->
<ion-label text-wrap>
<h3>Test</h3>
<p>Test</p>
<button ion-button color="danger" block (click)="viewUser(test .testId )">View User</button>
</ion-label>
</ion-item>
</ion-item-sliding>
</ion-content>
When we click on button then Checkbox click event is being triggered.
Even if we click anywhere in the row in that case Checkbox click event is being called.
Any help would be much appreciated.
Thanks in advance.
I inspected the ion-checkbox element and result that is a bug, or precisely an error of implementation by ionic, ionic bug report.
In short, inside ion-checkbox there is a button that trigger the event click, but the button have css properties to take all width and height of ion-item, and this button is inside of "shadow DOM", so is difficult override its properties.
But if you need a fix temporally.
I saw that this button inside ion-checkbox have a z-index: 2 property, so give a z-index: 3 to ion-label, and with this the space of button not will trigger, but the space of checkbox still work.
add on your .scss of your page
ion-label{
z-index: 3;
}
Also, a recommendation is to disable to effect when click the space of ion-item, that will improve the UX, because show that effect when click on white space and don't trigger an action is bad.
EDIT
My versions of the framework.
I hope I've helped :)
I am using ion-Slides to show the selected image from the gallery and swipe them horizontally and it is working good but I want to show the last selected image on the screen.
I tried using slideTo() and it causing the type error.
For more clarity: I am running a loop where I push selected images from gallery in with base64 conversion into an array and pass it in an image tag to show images on the HTML screen.
any help would be great.
#ViewChild('slides', { static: false }) slider: IonSlides;
I faced a similar problem.
Had to change static from true to false.
You can use ionSlidesDidLoad event to make sure ion-slide has loaded.
subscribe for the event in your html file like following sample:
<ion-content>
<ion-slides (ionSlidesDidLoad)="slidesLoaded($event)">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
</ion-slides>
</ion-content>
and in your ts file add the following method:
public slidesLoaded($event) {
//move to slide number 2
$event.target.slideTo(2);
}
This event is available in Ionic 4 and later.
I am trying to create an ion-list where each row has the following items from left to right
A thumbnail with an image from a URL OR and an ionic with 'clipboard'
A small text string
A tappable button/icon with the iso-information-circle-outline image (will be used to show a popover
A right-arrow at the far side showing that tapping this row will take them user to the next page
Originally I had the ngFor loop producing buttons for each row, and that made the arrow at the end appear, but stopped any buttons inside each row for being tapped correctly.
Other variants have meant the buttons are not aligned with text or if I use an ion-label around {{survey.label}} the button disappears altogether.
<ion-item *ngFor="let survey of surveys" (click)="openSurvey(survey)">
<ion-thumbnail item-start>
<img *ngIf="survey.icon" width="35" src="{{survey.icon}}"/>
<ion-icon *ngIf="!survey.icon" name="clipboard"></ion-icon>
</ion-thumbnail>
{{survey.label}}
<button (click)="showSurveyInfo($event, survey);$event.stopPropagation();" ion-button icon-only clear >
<ion-icon name="ios-information-circle-outline"></ion-icon>
</button>
<button ion-button item-end icon-only clear>
<ion-icon name="ios-arrow-forward"></ion-icon>
</button>
</ion-item>
This is how I'd like to lay it out, all there red parts are just annotations for this question. The Title and I have their vertical enters horizontally aligned. There is a subtitle in the lower half of the row and the lower text stops, preferably with an ellipsis (though probably out of scope for this question) so that the right arrow is always visible. Note too that the circle around the I is complete. In my current mark it is within a button and that clips the top and bottom off the icon.
I am new to Ionic. I want to design a carsharing application. I want to make a "Choose a destination" dropdown menu, with frequent options (like "Here", "Home", or "Anywhere") and a special "Choose a destination" option.
This option would ideally look like another dropdown menu (with the little triangle) and would open a modal with an input that would allow to pick an address (I'm not there yet, I would have to interface with google map or OSM... anyway).
I tried the following code
<ion-card>
<ion-card-header>
Where are you going?
</ion-card-header>
<ion-card-content>
<ion-item>
<ion-label>Destination</ion-label>
<ion-select [(ngModel)]="destination">
<ion-option>Here</ion-option>
<ion-option>Home</ion-option>
<ion-option>Work</ion-option>
<ion-option>
<ion-item>
<ion-label fixed>Choose a destination</ion-label>
<ion-select [(ngModel)]="destination_chosen">
</ion-select>
</ion-item>
</ion-option>
<ion-option>Anywhere</ion-option>
</ion-select>
</ion-item>
</ion-card-content>
</ion-card>
But it looks like it's not taken into account. What do I do wrong? Is it even possible? If not, would anyone have an idea of a good UX pattern to use in that case?
A simple solution would be to change the view of the modal to show the actual dropdown menu you want whan that option is selected as if it was a second step. A second different modal would not be ideal since putting a modal inside another modal is not a good UX practice. As it is part of a various-steps process, it won't feel odd.
So, instead of being part of the same view, you would have to createe a second one, should be simple enough with JS or even easier with Angular. A simple ng-show condition should do it.
Using the following markup:
<ion-list>
<ion-item>
<ion-label></ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label></ion-label>
<ion-input></ion-input>
</ion-item>
</ion-list>
It adds weird :last-child styling for the borders, which is even found in the documentation:
Notice how the password's border doesn't align like the username field's. Is there a reason for this behavior? Is there a way to change it [easily] without having to go through a ton of styles, i.e. selectors like this:
.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child
I am not sure if it is something they have done intentionally or accidentally, but to overcome this quickly whilst I have a ticket outstanding with them I did the following
I created a new ion item at the bottom of the list to act as the last item, then just set the display none on it.
This fixes the border issue for me as it is then applied to the hidden last ion item.
Ticket - https://ionic.zendesk.com/hc/en-us/requests/5283