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.
Related
How can I modify my q-input so when I press enter key in it, it will submit the q-form instead of go in a new line ? Thank you ! :)
<q-form ref="urlForm" greedy #submit="saveUrl">
<q-card-section>
<!-- url -->
<q-input
v-model="url"
:label="t('url')"
:rules="[urlValidator]"
outlined dense autogrow autofocus
></q-input>
</q-card-section>
<q-card-section class="text-center q-ma-none q-py-md">
<q-btn class="q-ma-xs" type="submit" color="positive" :loading="saving" :disable="saving">{{ t('SaveChanges') }}</q-btn>
</q-card-section>
</q-form>
My bad this is because of the autogrow in q-input.
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>
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 use vee-validate for form validation with bootstrap-vue, and cannot get anything to work. Basically, I want to do:
<b-form-input v-model="emailText"
placeholder="Enter email"
v-validate="'required|email'"
name="email"
type="text">
<b-row>
<span>{{ errors.first('email') }}</span>
</b-row>
</b-form-input>
But I don't see anything when I type a non-email address in the field. However, if I change:
b-form-input to input
then everything works. Is there a workaround for this behavior? Any help would be greatly appreciated.
You have put the error messages inside the <b-form-input>, which has no internal slot, so the error messages aren't rendered. If you move them to after the input, it should fix your issue:
<b-form-input v-model="emailText"
placeholder="Enter email"
v-validate="'required|email'"
name="email"
type="text">
</b-form-input>
<b-row>
<span>{{ errors.first('email') }}</span>
</b-row>
You can also use Bootstrap-Vue's state and invalid-feedback properties on the <b-form-input> and a surrounding <b-form-group> to display validation errors with a better accessibility. All of this is demonstrated in this codepen
Please advice how to implement password strength meter with Semantic UI progress bar?
<div class="ui left icon input">
<input type="password" class="form-control" name="password" id="password" placeholder="">
<i class="icon-lock teal icon"></i>
</div>
<div class="ui bottom attached progress">
<div class="bar">
</div>
</div>
Tutsplus has an awesome tutorial to calculate password strength using JavaScript which you can find here.
The tutorial will give you a score out of 100. Use this score to populate the progress bar in Semantic UI like this:
$('.progress').progress({
percent: score
});