I have an ion-list of food items to display wrapped in an ion-item, each of them is editable with three input fields (name, amount, unit), plus I would like to have a delete button at the left side of the row.
The inputs appear nicely within ion-item but I can't make the "trash" icon button to show up.
If I remove all the inputs, the button shows up.
What should I do to make both appear? Is it possible?
Here is the plunkr: http://plnkr.co/edit/JvHNEISfUCwcnujDB2jg?p=preview
Code:
<ion-content>
<ion-list>
<ion-item>
<button ion-button icon-only clear small>
<ion-icon name="trash"></ion-icon>
</button>
<ion-input type="text" value="peanut"></ion-input>
<ion-input type="number" value="1"></ion-input>
<ion-select>
<ion-option>oz</ion-option>
<ion-option>cup</ion-option>
<ion-option>glass</ion-option>
<ion-option>piece</ion-option>
</ion-select>
</ion-item>
</ion-list>
</ion-content>
ion-col and ion-row seemed to help, I wonder if this is the right way?
<ion-row>
<ion-col>
<button ion-button icon-only clear small>
<ion-icon name="trash"></ion-icon>
</button>
</ion-col>
<ion-col>
<ion-input type="text" value="peanut"></ion-input>
</ion-col>
<ion-col>
<ion-input type="number" value="1"></ion-input>
</ion-col>
<ion-col>
<ion-select>
<ion-option>oz</ion-option>
<ion-option>cup</ion-option>
<ion-option>glass</ion-option>
<ion-option>piece</ion-option>
</ion-select>
</ion-col>
</ion-row>
Related
I am using ion-select in my app. But when i run it on the device, ion-select shows three dots in spite of having sufficient space.
My Code is
<ion-row *ngIf="item.type=='variable'">
<ion-col>
<div class="addtocart">Add</div>
</ion-col>
<ion-col>
<ion-item class="item">
<ion-select placeholder="Size" interface="popover">
<ion-option *ngFor="let items of item.attributes[0].options">
{{items}}
</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
I have already tried using max-width:100% . ion-select works perfectly when i use it in new row. But i want to display it with other item in the same row.
Please help, i have been searching the net for the last 5-6 hours but no help.
Use text-wrap in ion-item or ion-select,it will wrap your select text.
<ion-row *ngIf="item.type=='variable'">
<ion-col>
<div class="addtocart">Add</div>
</ion-col>
<ion-col>
<ion-item class="item" text-wrap>
<ion-select placeholder="Size" interface="popover" text-wrap>
<ion-option *ngFor="let items of item.attributes[0].options">
{{items}}
</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
Then if it is not working then give min-width to ion-select in css
I am working in the Ionic App and In that I have some list items with the radio button and at the bottom of the page, I have the checkout button. I want to disable the button until the user checked one of the item.
This is my shipping.html:
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col col-12>
<ion-list radio-group>
<ion-item *ngFor="let itm of shippingdetails">
<ion-radio item-start value="{{itm.id}}"></ion-radio>
<ion-label>
<h2>{{itm.name}}</h2>
<p>{{itm.mobile}}</p>
<p>{{itm.state}}, {{itm.city}}</p>
<p>{{itm.address}}</p>
<p>Pincode: {{itm.pincode}}</p>
</ion-label>
<button ion-button outline item-end class="myedit22" (click)="editshipping(itm)">
<ion-icon name="create"></ion-icon>
</button>
<button ion-button outline item-end class="dele22" (click)="removeshipping(itm.id)">
<ion-icon name="ios-trash-outline"></ion-icon>
</button>
</ion-item>
</ion-list>
</ion-col>
<ion-col col-12 style="text-align: right;">
<button (click)="presentProfileModal()" class="myaddto22" ion-button square item-right>
Add Address
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<ion-footer class="single-footer" style="bottom: 51px; background-color: #fff;">
<ion-grid>
<ion-row>
<ion-col class="addCart">
<button class="myaddto22" [disabled]="!value" full ion-button round="true">
Make Payment
</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>
In this html, I am showing the items with the radio button and the checkout button at the bottom of the page but the problem is that, I am not able to disable the bottom button until the user checks the radio button.
In this, I am showing the items with the radio button and I have the button at the bottom. It will disable until the user select the item but the problem is that when the user select the item after that the button is not clickable.
Any help is much appreciated.
Seems like you need to store the selected radio button in a model, and then set your disabled flag based on that.
<ion-list radio-group [(ngModel)]="yourSelectedRadioValue">
...
<button class="myaddto22" [disabled]="!yourSelectedRadioValue" full ion-button round="true">
Make Payment
</button>
I met strange bug in my application. I template driven form with two addresses two fill:
<ion-list>
<ion-list-header color="secondary">From
<button ion-button icon-only item-right clear small (click)="usePosition($event)">
<ion-icon name="locate"></ion-icon>
</button>
<button ion-button icon-only item-right clear small (click)="searchAddress(true,$event)">
<ion-icon name="search"></ion-icon>
</button>
<button ion-button icon-only item-right clear small (click)="useHome(true,$event)">
<ion-icon name="home"></ion-icon>
</button>
</ion-list-header>
<div>
<ion-item>
<ion-label floating>Street Address*</ion-label>
<ion-input type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="createRequest.legs[0].addressFrom.Street"
required></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Floor/Apartment</ion-label>
<ion-input type="text"
name="Extention"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="createRequest.legs[0].addressFrom.Extention"></ion-input>
</ion-item>
<ion-item padding>
<ion-label floating>City or Borough*</ion-label>
<ion-input type="text" required name="City"
pattern="[a-zA-Z ]*"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="createRequest.legs[0].addressFrom.City">
</ion-input>
</ion-item>
<ion-item padding-bottom>
<ion-label floating>
Zip Code*(5 digits)
</ion-label>
<ion-input type="tel" name="Zip" #ZipF="ngModel"
pattern="\d{5}"
[textMask]="{mask:masks.zip}"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="createRequest.legs[0].addressFrom.Zip"
></ion-input>
</ion-item>
</div>
</ion-list>
<ion-list padding-bottom padding-top>
<ion-list-header>To
<button ion-button icon-only item-right clear small (click)="searchAddress(false,$event)">
<ion-icon name="search"></ion-icon>
</button>
<button ion-button icon-only item-right clear small (click)="useHome(false,$event)">
<ion-icon name="home"></ion-icon>
</button>
</ion-list-header>
<ion-item>
<ion-label floating>Street Address*</ion-label>
<ion-input type="text"
[ngModelOptions]="{standalone: true}"
#Street="ngModel"
[(ngModel)]="createRequest.legs[0].addressTo.Street"
required></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Floor/Apartment</ion-label>
<ion-input type="text"
[ngModelOptions]="{standalone: true}"
#Extention="ngModel"
[(ngModel)]="createRequest.legs[0].addressTo.Extention"
></ion-input>
</ion-item>
<ion-item padding>
<ion-label floating>City or Borough*</ion-label>
<ion-input type="text"
pattern="[a-zA-Z ]*"
#City="ngModel"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="createRequest.legs[0].addressTo.City">
</ion-input>
</ion-item>
<ion-item>
<ion-label floating>Zip Code(5 digits)</ion-label>
<ion-input type="tel" #Zip="ngModel"
pattern="\d{5}"
[ngModelOptions]="{standalone: true}"
[textMask]="{mask:masks.zip}"
[(ngModel)]="createRequest.legs[0].addressTo.Zip"
></ion-input>
</ion-item>
</ion-list>
I tried to use [ngModelOptions]="{standalone: true}" but without any result.
At some moment for unkonown reason two addresses start duplicate each other and even stranger thing in this case that using predefined data(like in useHome() method) didn't give effect. I know that answer is near, so will appreciate any help in advance.
Use unique name attributes for your form fields, this way each form field will be evaluated as separate one. I see some inconsistency in the use of the name attribute, all should have a name attribute, as well as #someName="ngModel" if you want to use validation. Loose the ngModelOptions altogether. I would separate these and do for example From... and To... for the name attribute:
For example the two fields for Street:
<ion-input name="FromStreet" #FromStreet="ngModel"
[(ngModel)]="createRequest.legs[0].addressFrom.Street" required>
</ion-input>
and
<ion-input type="text" name="ToStreet" #ToStreet="ngModel"
[(ngModel)]="createRequest.legs[0].addressTo.Street" required>
</ion-input>
This way all fields are unique.
This line of code:
[ngModelOptions]="{standalone: true}"
Is telling the form that your input element is NOT included as part of the form's data. You only want to do that with controls that you don't want to track on submittal. For example, say you have a checkbox that simply opens or closes a part of the user interface. You don't want that part of the submitted data, so you would use the standalone option so it "stands alone" from the form and its data.
I have a form with product rate and quantity inputs. I need to calculate the value (rate * quantity) and assign the value to amount input field.
Please find the code snippet below:
<form [formGroup]="additemForm" (ngSubmit)="submit(additemForm.value)" >
<ion-row>
<ion-col>
<ion-list inset>
<ion-item>
<ion-label>Product :</ion-label>
<ion-select formControlName="product">
<ion-option *ngFor="let product of productArray" value="{{product.code}}" selected="false">{{product.name}}</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>QUANTITY :</ion-label>
<ion-input type="number" formControlName="qty"></ion-input>
</ion-item>
<ion-item>
<ion-label>RATE:</ion-label>
<ion-input type="number" formControlName="rate"></ion-input>
</ion-item>
<ion-item>
<ion-label>Value :</ion-label>
<ion-input type="number" formControlName="value"></ion-input>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="signup-col">
<button ion-button class="submit-btn" type="submit" [disabled]="!additemForm.valid">Submit</button>
<button ion-button type="button" (click)='cancel()' >Cancel</button>
</ion-col>
</ion-row>
</form>
You need to use [(ngModel)] for this.
<ion-item>
<ion-label>QUANTITY :</ion-label>
<ion-input type="number" formControlName="qty" [(ngModel)]="quantity"></ion-input>
</ion-item>
<ion-item>
<ion-label>RATE:</ion-label>
<ion-input type="number" formControlName="rate" [(ngModel)]="rateValue"></ion-input>
</ion-item>
<ion-item>
<ion-label>Value :</ion-label>
<ion-input type="number" formControlName="value" [(ngModel)]="rateValue * quantity"></ion-input>
</ion-item>
Now, still amount input field will be edible after this. And changing this value will affect the other 2 input values also. You can disable the input, so it will appear as a read-only input. This worked in my code.
I've been trying to use ion-cards using ion dark theme, and I can't actually see the text;
I tried to change the CSS with this:
h2,p {
color:white;
}
and it's still black.
I took the code right from ionic documentation:
<ion-card class="col-md-4" *ngFor="let new of news;let i=index">
<ion-item>
<ion-avatar item-left>
<img [src]="new.image_url" *ngIf="new.image_url">
</ion-avatar>
<h2>TEST</h2>
<p>AA TEST</p>
</ion-item>
<ion-card-content>
<p>
TSET SUMMARY
</p>
</ion-card-content>
<ion-row>
<ion-col>
<button ion-button icon-left clear small>
<ion-icon name="thumbs-up"></ion-icon>
<div>12 likes</div>
</button>
</ion-col>
</ion-row>
</ion-card>
Any ideas?
You can overwrite the ionic variable itself. Navigate the ./theme/variables.scss and add
$card-ios-text-color(#fff);
$card-md-text-color(#fff);
$card-wp-text-color(#fff);
All the ionic variables can be found here for quick reference