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.
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 :)
When I click on the label of an ion-item the checkbox is triggered.
I want to find a way of preventing this from happening as I want to trigger another function when clicking the label.
I found this answer for Ionic 3: https://forum.ionicframework.com/t/solved-can-i-disable-a-checkbox-from-activating-when-clicking-on-a-label/95120
However, it is not working for Ionic 4.
<ion-item>
<ion-icon [name]="setIconDoc(item.document.documentType)" color="primary" (click)="editDocument(item.document)"></ion-icon>
<ion-label padding-start color="none" (click)="editDocument(item.document)"> {{ item.document.customer.name }}
</ion-label>
<ion-checkbox slot="end" color="success" [(ngModel)]="item.isChecked">
</ion-checkbox>
</ion-item>
I'd like to have two behaviors:
- When clicking in the Checkbox trigger just the checkbox.
- When clicking on the label or the icon open a modal to edit my document.
I just had a similar problem and found a nice solution for it in ionic 4 by using the slots of ion-item.
<ion-item lines="full">
<ion-icon slot="start" name="at" (click)="iconClicked()"></ion-icon>
<ion-label slot="start" (click)="labelClicked()">
This is a separately clickable label
</ion-label>
<ion-checkbox slot="end"></ion-checkbox>
</ion-item>
Explanation
The elements in the start slot of the ion-item are not triggered when clicking the checkbox.
The start slot has no bottom border by default so it must be set by adding lines="full" to the ion-item;
Be aware, that the main slot still is rendered with a large width. That may lead to some hidden content. In this case this can be fixed with a css tweak like this.
ion-item ion-label {
overflow: visible;
}
I found another solution. I added another hidden checkbox in the item.
<ion-item *ngFor="let task of tasks;let i of index;" padding margin>
<ion-checkbox slot="start" color="success" (click)="DeleteTask($event, task)"></ion-checkbox>
<!-- another checkbox otherwise item clicks triggers checkbox click -->
<ion-checkbox hidden=true ></ion-checkbox>
<ion-label >
{{task.Name}}
</ion-label>
<ion-reorder slot="end"></ion-reorder>
You can also wrap the checkbox in a slotted div, which appears to break the link between the item and the checkbox.
<ion-item (click)="itemHandler()">
<ion-icon />
<ion-label>Label</ion-label>
<ion-checkbox (click)="checkboxHandler()" />
</ion-item>
If you put the click handler on the ion-item then it will handle clicks from anywhere on the ion-item. However, that includes clicks from the checkbox, so you have to make sure to also call event.stopPropagation() in the checkbox click handler.
Is there a way to force content behind a disabled button, that is transparent?
Here is the code:
<ion-fab bottom right #fab1>
<button tappable ion-fab color="green" class="no-text-transform" (click)="proximo()" [disabled]="!cultivaresForm.valid">
<ion-icon name="arrow-round-forward"></ion-icon>
<ion-label>Próximo</ion-label>
</button>
</ion-fab>
I'm not quite sure to understand what you want to do here, but if you want to apply a style depending on a particular logic you can use ngClass.
i.e. if you want to apply a style to your text when the button is disabled (so when
!cultivaresForm.valid) you can do something like this:
<ion-fab bottom right #fab1>
<button tappable ion-fab color="green" class="no-text-transform" (click)="proximo()" [disabled]="!cultivaresForm.valid">
<ion-icon name="arrow-round-forward"></ion-icon>
<ion-label>Próximo</ion-label>
</button>
</ion-fab>
<p [ngClass]="{text-behind: !cultivaresForm.valid}">the text you want to put behind</p>
You can then define the text-behind style in a separate CSS file.
Im trying put ion-button inside the card.
But it's bottom border/outline disappears, as shown below.
It comes back when I click the button.
Why is this happening?
the image on top is loading late and causing this how do i wait for the image to load before rendering the page
or occupy the image space for image is loaded
Found a messy fix.
<img src="..." (load)="homeImageLoaded = true"/>
<ion-buttons *ngIf="homeImageLoaded">
<button> </button>
</ion-buttons>
I have a simple full screen page that shows a photo and you can enter a caption. The trouble I am having is that when I focus on the input box, the page scrolls and half the image is removed.
<ion-content fullscreen [ngClass]="{'focus': focus, 'focus-out': !focus}" class="focus" [ngStyle]="{'background-image': 'url(' + image + ')'}" no-border>
<div class="gradient"></div>
</ion-content>
<ion-footer>
<ion-toolbar color="transparent">
<ion-grid>
<ion-row>
<ion-col col-10>
<image-caption (caption)="saveCaption($event)" (focusIn)="focus = true" (focusOut)="focus = false"></image-caption>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
</ion-footer>
I would like the ion-content not to scroll but the text box (inside image-caption component) to appear when focused. I have tried no-scroll and no-bounce in ion-content. I have also tried the native keyboard method to disable scroll this.keyboard.disableScroll(true);
Can I disable scroll on one item? The other solution I see here is to disable scroll and change to position of the input box to show when the keyboard is shown.
Ended up using transform to scale the image but the problem seems to be solved.