I am using ionic toggle, and below is the simple code:
<ion-item>
<ion-label>test</ion-label>
<ion-toggle checked="true"></ion-toggle>
</ion-item>
Now, label and toggle are in one line, I want the label and toggle both open a new line with 100% width, how can I do that? Thanks
Just put them outside the ion-item like this:
<div>
<ion-label>test</ion-label>
<ion-toggle checked="true"></ion-toggle>
</div>
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.
I'm Trying to hide/show elements of a ion-list depending of a boolean variable which is changed when a button is clicked.
The problem is that if I try with *ngIf="{{editMode}}" the ionic serve --lab shows blank screen on browser.
<ion-item-sliding *ngFor="let item of items" (click)="itemTapped($event, item)">
<ion-item>
<ion-icon item-left name="rose" *ngIf="{{editMode}}"></ion-icon>
<ion-icon name="{{item.icon}}" item-left></ion-icon>
{{item.title}}
<div class="item-note" item-right>
{{item.note}}
</div>
</ion-item>
And if i try with *ngIf="'editMode'" the result of click on button is nothing.
When I click on a nav bar button the boolen variable is modified to true/false.
What would be wrong?
Check here
You have to do *ngIf="editMode"
*ngIf="'editMode'" - Here you are just taking the string editMode which is truthy and button will not work.
I created a button in Ionic 2 as follows:
<button secondary block round padding style="text-align : left;">
<ion-icon ios="ios-key" md="md-key"></ion-icon>
Login
</button>
I am trying to align the button text to left side but its not coming there. Is there build in twik available to achieve that?
Ionic wraps the contents of the button into a <span> tag which has the class .button-inner. So the HTML markup looks something like this when you inspect it
<button secondary block round padding>
<span class="button-inner">
<ion-icon ios="ios-key" md="md-key" item-right></ion-icon>
Login
</span>
<ion-button-effect></ion-button-effect>
</button>
The .button-inner class applies flexbox properties to position the text and icons central. You can overwrite the justify-content property and change the value from center to flex-start and this will tell the content (the text and icon) to start from the beginning of the box.
Example
If you want to apply it to all buttons
.button-inner{
justify-content:flex-start;
}
If you want to apply it to a specific button (where .specific-button is added as a class to a button component)
.specific-button .button-inner{
justify-content:flex-start;
}
Because Ionic use its class generate default css. So you should use SASS to customize CSS .
For example :
<button class="item">
<ion-icon ios="ios-key" md="md-key"></ion-icon>
Login
</button>
file styles.scss
.item{
#extend secondary;
#extend block;
text-align : left;
}
You can use the item-left attribute inside the button-tag. No need for class="" or style="".
<button secondary block round padding item-left>
<ion-icon ios="ios-key" md="md-key"></ion-icon>
Login
</button>
More information here