When I portrait mode *ngIf it hides values what I want but when I make the device landscape it's showing empty cards between true values.
<ion-col sizeLg="4" sizeMd="4" sizeXs="12" *ngFor="let order of orders">
<ion-card *ngIf="order.status =='CL'">
<ion-card-title>
<h4>{{order.title}}</h4>
</ion-card-title>
<ion-card-content>
<ion-item>
<h4>{{order.description | filter:[200, '...']}}</h4>
</ion-item>
</ion-card-content>
<ion-button type="button" color="danger">Canceled</ion-button>
<ion-button type="button" color="primary">Delivered</ion-button>
</ion-card>
</ion-col>
The problem is that you're hiding the card but you're still leaving an empty column. Please try by hiding both the card and the column instead:
<ng-container *ngFor="let order of orders">
<ion-col sizeLg="4" sizeMd="4" sizeXs="12" *ngIf="order.status =='CL'">
<ion-card >
...
</ion-card>
</ion-col>
</ng-container>
Related
We're using Quasar Framework with Vue.js. Consider the following q-card that is clickable:
<div class="q-pa-md row items-start q-gutter-md cursor-pointer">
<q-card class="my-card" clickable #click="GetSapRoster">
<q-card-section class="bg-primary text-white">
<div class="text-h6">SAP Truck Roster</div>
<div class="text-subtitle2">Get the truck planning</div>
</q-card-section>
</q-card>
</div>
How is it possible to achieve the same effect for a q-card as with a q-btn?
At the moment when using the class cursor-pointer it only fixes the mouse pointer but not the shading effect like a q-btn has.
You can use v-ripple + q-hoverable + q-focus-helper to simulate a button.
For example:
<q-card v-ripple class="my-box cursor-pointer q-hoverable">
<span class="q-focus-helper"></span>
<q-card-section>
...
</q-card-section>
</q-card>
i need to increment a number variable with #variable.value
My target is increment or decrement input quantity value, in ngFor of products to buy them.
so this is my code:
<ion-card *ngFor="let product of products">
<ion-card-content>
{{product.prdNote}}
<div class="quantity-container">
<div class="quantity-buttons">
<ion-button (click)="quantityInput.value++">-</ion-button>
<!-- <ion-input type="number" #quantityInput value="quantity" (change)="setQuantity($event)"></ion-input> -->
<ion-input type="number" #quantityInput [value]="product.prdContainer"></ion-input>
<ion-button (click)="quantityInput.value++">+</ion-button>
</div>
<div class="buy">
<ion-button (click)="addToCart(product, quantityInput.value)"> <ion-icon name="cart"></ion-icon>Aggiungi all'ordine</ion-button>
</div>
</div>
</ion-card-content>
</ion-card>
i want increment input value number in ng for, every single input i want increment or decrement with #quantityInput.value++, but didn't work for me.
The error is that:
quantityInput.value Expected a number type
Can i cast #quantityInput.value as number in html ?
There's another way to work?
Thanks
For me, (click)="quantityInput.value++" was parsing error. Following code worked for me.
Try
<ion-button (click)="quantityInput.value=+quantityInput.value+1">+</ion-button>
Here + in +quantityInput.value is used for casting.
Here is the working example
Currently I am working on PWA project. In that I am using ionic-vue package. I am using ion-input for taking user input in form but required and size properties not working.
Code for vue component:
<template>
<div>
<ion-header>
<ion-toolbar>
<ion-icon name="close" class="close-icon" #click.prevent="redirectTo(close)"></ion-icon>
<ion-title>{{ title }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="occupie-field" padding>
{{ content }}
<div>
<ion-input class="modal-ion-input"
:placeholder="rootElement.$t('number-of-person')"
type="number" mode="ios" inputmode="decimal"
:value="total_person"
#input="total_person = $event.target.value"
></ion-input>
<ion-input class="modal-ion-input"
:placeholder="rootElement.$t('name')"
:value="booking_name"
#input="booking_name = $event.target.value"
></ion-input>
<ion-input class="modal-ion-input"
:placeholder="rootElement.$t('mobile-no')"
type="tel" inputmode="tel"
:value="contact_number"
#input="contact_number = $event.target.value"
></ion-input>
<ion-input class="modal-ion-input"
:placeholder="rootElement.$t('gstin-no')"
:value="gst_no" size="15" type="text"
#input="gst_no = $event.target.value"
></ion-input>
<!-- <tags-input
element-id="tags"
:existing-tags="available_table_list"
:typeahead="true"
:showAddedTags="true"
typeahead-style="dropdown"
:delete-on-backspace="false"
:only-existing-tags="true"
placeholder="Merge Table"
#tag-added="onTagAdded"
#tag-removed="onTagRemoved"
v-model="selectedTags"
></tags-input> -->
<!-- <ion-list> -->
<ion-item class="select-tablee">
<ion-label hidden>{{rootElement.$t('select-tables')}}</ion-label>
<ion-select :placeholder="rootElement.$t('merge-table')" multiple="true" value="merge_tables" #ionChange="selectChange($event)" :disabled="Object.keys(available_table_list).length === 0">
<ion-select-option v-for="(table, index) in available_table_list" :key="index" :value="index">{{ table }}</ion-select-option>
</ion-select>
</ion-item>
<!-- </ion-list> -->
</div>
<ion-button class="occupie-table-button" #click.prevent="submit" :disabled="disableBtn">{{rootElement.$t('occupie-table')}}</ion-button>
</ion-content>
When I add required property in ion-input then required property not working and form submitted without checking.
see this - https://gist.github.com/mlynch/2ff3692341276ba959fea96a620097f9
try
<IonInputVue v-model="contact_number" size="10"/>
I'm trying to display the radio button data based on user select but it doesn't display anything. Here is my code :
<div ng-app="" ng-init="categoryID">
<ion-list radio-group>
<ion-item>
<ion-label>Category 1</ion-label>
<ion-radio value="category1" ng-model="categoryID"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Category 2</ion-label>
<ion-radio value="category2" ng-model="categoryID"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Category 3</ion-label>
<ion-radio value="category3" ng-model="categoryID"></ion-radio>
</ion-item>
</ion-list>
<p>Category : {{ categoryID }}</p>
</div>
Trying to display like how it display at this url https://codepen.io/terrer-sandman/pen/erMzzQ
First see the code:
<ion-row>
<ion-col col-6>
<ion-input placeholder="First Name" [value]="fName" [(ngModel)]="fName"></ion-input>
</ion-col>
<ion-col col-6>
<ion-input placeholder="Last Name" [value]="lName" [(ngModel)]="lName"></ion-input>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12>
<ion-input type="email" [disabled]="emailDisabled" placeholder="Email" [value]="email" [(ngModel)]="email"></ion-input>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12>
<ion-input type="tel" maxlength="10" placeholder="Mobile Number" [value]="mobile" [(ngModel)]="mobile"></ion-input>
</ion-col>
</ion-row>
The problem is: When any of the ion-input is focused & keyboard appears, it hides below the keyboard. I want it to scroll above the keyboard, so that it remain visible. How can I achieve this?
Edit1:
When I started typing in input field, it scrolls up & visible.
Thanks
I'm having the same problem on Android & solve this bug from the following Post on git
Ionic 2 On-Screen Keyboard Covers Focused Input Element Inside Grid Component
I solved the problem adding the style position: initial to ion-col elements.