@levipadre wrote:
Hi guys,
Does anybody has experience with registerAnimation within Ion-menu? I try to add new animations to the menu, like the documentation explains here: https://github.com/ionic-team/ionic/tree/3c9ed3166d3a11a4172b5875784c0321311cfd82/core/src/components/menu-controller
I can’t really show any code, because I couldn’t make anything worthwhile yet.
Any example would be helpful.
Posts: 1
Participants: 1
@pnaa78 wrote:
Navigation triggered outside Angular zone, did you forget to call ‘ngZone.run()’?
All of a sudden my app started to give this warning and at certain pages, it redirects to default page (login)…
Any help???
Ionic:
ionic (Ionic CLI) : 4.10.3 (C:\Users\pnaan_000\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.2
@angular-devkit/build-angular : 0.12.4
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.3.3
@ionic/angular-toolkit : 1.3.0Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 7 other plugins)System:
Android SDK Tools : 26.1.1 (C:\Android\studio)
NodeJS : v10.13.0 (C:\Program Files\nodejs\node.exe)
npm : 6.7.0
OS : Windows 10
Posts: 1
Participants: 1
@negarmir wrote:
Hi
I have a problem with an application which I had created using ionic 4.1.2. it was created in windows 7.
recently I installed windows 10 and made some changes in the application.
the problem that I have now is when I try to install new apk to update previous version, I see the following message which is good:
" Do you want to install an update to this existing application? Your existing data will not be lost. It does not require any special access"
It is exactly what I want.
But when I press install button, it shows me “App not installed.” message.
I don’t know how to find the issue and how to fix it.Some one please help me to fix this issue. Thanks
Posts: 1
Participants: 1
@balvantjat wrote:
I want to design forms like this please post some code sample
- Using Ionic-v4
Provide css rules for variable.scss FILE
Posts: 1
Participants: 1
@vzDeadler wrote:
I have this scenario…
The left one is what i got, the signup on the bottom and the login and the buttons on the middle of all the remaining space, and i want is like the right one, the login and the buttons on the middle of all the content. How i can achieve that?
This is my code
<ion-content primary padding> <ion-grid class="login-grid"> <ion-row align-items-center text-center> <ion-col size="12"> <ion-item> <ion-input placeholder="Email"></ion-input> </ion-item> <ion-item> <ion-input placeholder="Password"></ion-input> </ion-item> <ion-button expand="full" size="large">JOIN</ion-button> <div class="sign-in-hr"> <span>Or log in with</span> </div> <!-- <hr class="hr-text" data-content="Or join with"> --> <ion-row> <ion-col class="fb-col" size="6"> <ion-button class="rs-btn fb" size="default"> <ion-icon slot="icon-only" name="logo-facebook"></ion-icon> Facebook </ion-button> </ion-col> <ion-col size="6"> <ion-button class="rs-btn g" size="default"> <ion-icon slot="icon-only" name="logo-google"></ion-icon> Google </ion-button> </ion-col> </ion-row> </ion-col> <ion-col size="12" align-self-end> <div class="sign-in-hr"> <span>Not registered?</span> </div> <ion-button expand="full" size="default">Sign up</ion-button> </ion-col> </ion-row> </ion-grid> </ion-content>And this is my scss
.login-grid { height: 100%; ion-row { height: 100%; } } .sign-in-hr { width: 100%; height: 10px; border-bottom: 1px solid rgb(177, 167, 167); text-align: center; margin-top: 10px; margin-bottom: 10px; span { font-size: 18px; color: rgb(177, 167, 167); background-color: #ffffff; padding: 0 10px; } } .fb-col { padding-left: 0px !important; } .rs-btn { width: 100%; --border-radius: 0px; text-transform: none; &.fb { --background: #3b5998; } &.g { --background: #d62d20; } }
Posts: 1
Participants: 1
@skildfrix wrote:
I have a UI which consist of 2 text inputs. First is the ion input which has a placeholder of “Title of the discussion”, and the other which is a textarea with a placeholder of “Write a discussion”. See the screenshot below:
I wanted to enable a border to both text input elements to make these elements to be visible to the user. Below is my current HTML and CSS code for this UI.
social.component.html
<div id="topSection"> <ion-card> <ion-card-header> <ion-grid item-start> <ion-row> <ion-col id = "userAvatarContainer" size = "1" size-lg> <ion-avatar id = "userAvatar"> <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"> </ion-avatar> </ion-col> <ion-col> <ion-input id="discussTitle" placeholder="Title of the discussion" pattern="text"></ion-input> </ion-col> </ion-row> <ion-row> <ion-textarea wrap="soft" placeholder="Write a discussion..."> </ion-textarea> </ion-row> </ion-grid> </ion-card-header> <ion-card-content> <ion-button expand="full">Publish</ion-button> </ion-card-content> </ion-card> </div>social.component.scss
#topSection > ion-card > ion-card-header{ width: 100%; } #userAvatar{ width: 50px; height: 50px; } #topSection > ion-card > ion-card-header > ion-item > ion-list{ width: 100%; } #topSection > ion-card > ion-card-header > ion-item > ion-list > ion-item > ion-textarea{ height: 150px; } #userAvatarContainer{ vertical-align: middle !important; }Hoping someone could help as soon as possible. Thank you.
Posts: 1
Participants: 1
@000678bb wrote:
<ion-scroll #scroll scrollX=“true” style=“height:85px; border-bottom: 2px solid #a01e1e;”>
<ion-col col-10 *ngFor=“let date1 of dateJson.data” (click)=“selectDate1(date1.apt_id, date1.full_date)”>
<div class=“div_date” *ngIf=“appoint_date != date1.full_date” >
{{date1.date}} {{date1.day}}
{{date1.month}}
<div class=“div_date_select” *ngIf=“appoint_date == date1.full_date” #scroll>
{{date1.date}} {{date1.day}}
{{date1.month}}
this is my html code i want to access #scroll element but by getting element by id it should be null how to get that element or any other option for this
Posts: 1
Participants: 1
@ankushagg93 wrote:
Hello everyone, asking for a favor.
I have a Ionic Weather app -
Github - https://github.com/aggarwalankush/ionic-mosum
Play store - https://play.google.com/store/apps/details?id=com.aggarwalankush.mosum
No longer available on iOS as I don’t have apple developer account anymore.Anyone willing to help upgrade it from Ionic v3 to v4 or stencil based instead of angular.
Thanks!!
Posts: 1
Participants: 1
@Manel00 wrote:
Hi everyone,
I’m trying to adapt a CRUD app to only an Auth app empty, but the problem is i dont know how to deal with adding the info to the user, i have this code, but its not working, thank you so much
export interface Note { id?: string, name: string, notes: string } @Injectable({ providedIn: 'root' }) export class NoteService { private notes: Observable<Note[]> private noteCollection: AngularFirestoreCollection<Note>; constructor(private afs: AngularFirestore, private user: UserService, private afAuth: AngularFireAuth) { this.noteCollection = this.afs.collection<Note>(`/users/${user.getUID}/notes`); this.notes = this.noteCollection.snapshotChanges().pipe( map(actions => { return actions.map(a => { const data = a.payload.doc.data(); const id = a.payload.doc.id; return { id, ...data } }) }) ); } getNotes(): Observable<Note[]> { return this.noteCollection.valueChanges() } getNote(id: string): Observable<Note> { return this.noteCollection.doc<Note>(id).valueChanges().pipe( take(1), map(note => { note.id = id; return note }) ); } addNote(note: Note): Promise<DocumentReference> { return this.noteCollection.add(note); } updateNote(note: Note): Promise<void> { return this.afs.doc(`users/${this.afAuth.auth.currentUser.uid}/note/${note.id}`) .update(data => { name: note.name, notes: note.notes }); } deleteNote(id: string) { return this.noteCollection.doc(id).delete(); } }Where can i learn how to do it correctly? (WITH AUTH)
Posts: 1
Participants: 1
@iondafi wrote:
My ion-datetime has a min value set to 27 February 2019, when I want to select (for example) March 2 I can’t, because the day of month 2 isn’t allowed (but for February not for all other months)
Under Ionic 3 the bug doesn’t exist, when I click on March I can drag the day of month and the previous values appear, on Ionic 4 dragging, double clicking, tapping, praying doesn’t work
The code I use is shown below
<ion-datetime display-format="DD/MM/YYYY" min="2019-02-27" value="2019-02-27"></ion-datetime>Ionic: ionic (Ionic CLI) : 4.10.3 (/usr/local/lib/node_modules/ionic) Ionic Framework : @ionic/angular 4.0.0 @angular-devkit/build-angular : 0.12.3 @angular-devkit/schematics : 7.2.3 @angular/cli : 7.2.3 @ionic/angular-toolkit : 1.2.3 Cordova: cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1) Cordova Platforms : android 7.0.0, ios 4.5.5 Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 8 other plugins) System: ios-deploy : 1.9.4 NodeJS : v10.9.0 (/usr/local/Cellar/node/10.9.0/bin/node) npm : 6.7.0 OS : macOS Mojave Xcode : Xcode 10.1 Build version 10B61
Posts: 1
Participants: 1
@manojpatel0217 wrote:
I tried to add firebase plugin in ionic 4
it show me its added properly but after that when i tried to build application it gives me files not accessible error.
Can anyone help me out on this?
Posts: 1
Participants: 1
@pantarmj wrote:
In ionic4, generates #shadow-root as shown in the image below:
To assign custom css to ion-item element, I need to style the child elements under #shadow-root. Plz tell me how can I point to the elements with “item-native” class and “item-inner” class?
I tried following but “item-native” is not getting styled:
.list-item.item-native {
// custom css
}
.list-item .item-native {
// custom css
}Can someone plz help me…
Posts: 1
Participants: 1
@notbenj33 wrote:
Hello,
I’m migrating an application from v3 to v4.
I have an issue with IonContent.
In the v3 code, we use thescrollToBottom()method.
In v4, I can’t find it.I tried
import {IonContent} from '@Ionic/angular';
with
@ViewChild(IonContent) content: IonContent
and also with this ViewChild
@ViewChild(IonContent, {read: IonContent}) content: IonContent
But the auto-complete only gives me access to the 3 events (ionScroll, ionScrollEnd, ioScrollStart).
I don’t get the autocomplete for the methods listed in the v4 documentation:
I tried
import {Content} from '@Ionic/angular';
But this class cannot be found in the @ionic/angular package.I use @Ionic/angular 4.0.1
Am I missing something?
Thank you.
Posts: 1
Participants: 1
@flotilla wrote:
Hey, i have some problem with Native Page Transitions.
here is my code.
home.page.html
<ion-footer> <ion-tabs> <ion-tab-bar slot="bottom" > <ion-tab-button (click)="slidePage()" href="/profil" style="margin-bottom:5px" > <ion-icon end style="color: white; font-size: 35px !important" name="md-person"></ion-icon> </ion-tab-button> <ion-tab-button> </ion-tab-button> <ion-tab-button href="/options" style="margin-bottom:5px"> <ion-icon style="color: white; font-size: 35px; " name="ios-more"></ion-icon> </ion-tab-button> </ion-tab-bar> </ion-tabs> <div class="knfooter"> <a href="/giris"> <img src="../assets/images/scanning5.png" style="height: 86px; " ></a> </div> </ion-footer>app.module.ts
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { NativePageTransitions } from '@ionic-native/native-page-transitions/ngx'; //import { GirisPage } from './giris/giris.page'; @NgModule({ declarations: [ AppComponent, //GirisPage, ], entryComponents: [ ], imports: [ BrowserModule, IonicModule.forRoot(), AppRoutingModule, ], providers: [ StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, NativePageTransitions, ], bootstrap: [AppComponent,] }) export class AppModule {}and
home.page.ts
import { Component } from '@angular/core'; import { Router } from '@angular/router'; import { NativePageTransitions, NativeTransitionOptions } from '@ionic-native/native-page-transitions/ngx'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { constructor(private router: Router, private nativePageTransitions: NativePageTransitions ) {} slidePage(){ let options: NativeTransitionOptions = { direction: 'left', duration: 400, slowdownfactor: -1, iosdelay:50 } this.nativePageTransitions.slide(options); this.router.navigateByUrl("/profil"); } }no error but not working.
Posts: 1
Participants: 1
@flotilla wrote:
Hi, i want to open my project in a android emulator or device. but when i write " ionic cordova run android" i take this error:
What went wrong:
A problem occurred evaluating project ‘:CordovaLib’.
> No installed build tools found. Install the Android build tools version 19.1.0 or higher.
*** Try:**
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
*** Get more help at https://help.gradle.org**
BUILD FAILED in 0s
/Users/bugra/Desktop/ionic denemeler/sayfa/platforms/android/gradlew: Command failed with exit code 1 Error output:
FAILURE: Build failed with an exception.
How can i solve the problem? thx.
Posts: 1
Participants: 1
@pdj wrote:
Hello
I start my app with onesignal .
but sometimes window[“plugins”] value is undefined so it goes to error screen…
how can I prevent from getting window[“plugins”] is undefined?window["plugins"].OneSignal .startInit("xxxx", "xxxxx") .handleNotificationOpened(function(jsonData) { console.log(jsonData.notification.payload.additionalData.datas) }) .endInit();
Posts: 2
Participants: 2
@Nicolus wrote:
How can we use grid alignment with ionic v4 ?
I did not succeed in using attributes like align-items-center, align-self-center… on rows and cols.
I made my own CSS to center horizontaly and verticaly an ion-label but I’m sure there is a better way :
<ion-content> <ion-grid> <ion-row> <ion-col> <ion-label> label </ion-label> </ion-col> </ion-row> </ion-grid> </ion-content>ion-grid { text-align: center; justify-content: center; display: flex; flex-direction: column; height: 100%; }With previous versions, to my mind, component page of ionic web page showed live demo of widgets with associated code. It was usefull…
Thanks
Posts: 1
Participants: 1
@gokujy wrote:
Hello, I want set background image in my page, anyone know how to do?
Please help if possible…!
Posts: 1
Participants: 1
@Praveensb wrote:
Hi coders,
I am new to ionic.
Please help me to solve the below problem.How to import and apply Google Roboto regular and Roboto medium fonts to ionic 3?
Posts: 1
Participants: 1
