On Chrome using ionic serve, I sometimes get the following error:
TypeError: Cannot read property ‘style’ of null
at Content.addScrollPadding (\C:\project\node_modules\ionic-angular\components\content\content.js:179:28)
at eval (\C:\project\node_modules\ionic-angular\components\content\content.js:189:23)
at eval (\C:\project\node_modules\ionic-angular\util\keyboard.js:39:21)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:14051)
at e.runTask (http://localhost:8100/build/polyfills.js:3:11411)
at invoke (http://localhost:8100/build/polyfills.js:3:15164)
I think I have only seen it while using the Nexus 7 devtools emulator, but honestly I am not sure. It is intermittent. This happens after calling this.viewCtrl.dismiss(); on a modal which just created a new entry in firebase, and the page that is displayed after closing the modal includes a list which includes that new entry. I don’t know if that is relevant information, but this is an intermittent (but about 1/3 of the time) problem which may mean synchronization is an issue. If I refresh the page, it displays just fine with no errors.
My setup is
ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.46
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.1
Xcode version: Not installed
The modal code that runs last is:
done() {
console.log(this.newP);
let p = {};
p[this.newP[“title”]] = {“overview”: {“description”: this.newP[“description”]}};
this.projectService.getGroup(this.newP[“group”]).update§;
this.viewCtrl.dismiss();
}
The page template that dismissing the modal returns to includes:
> <ion-list *ngFor="let group of groupObservable | async">
> <ion-row>
> <ion-col width-25>
> <ion-item>
> <button ion-button>Edit Group: {{group.$key}}</button>
> </ion-item>
> </ion-col>
> </ion-row>
> <ion-item *ngFor="let p of group.projects | async">
> <ion-row *ngIf="unoccupied(p)">
> <ion-item>
> <button ion-button block (click)="clickButton(p)">
> <ion-icon name="open"></ion-icon>
> <div class="space">{{p.$key}}</div>
> <div class="space">{{p.overview.description}}</div>
> </button>
> </ion-item>
> </ion-row>
> </ion-item>
> </ion-list>
> </ion-grid>
>
> <ion-fab right bottom>
> <button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
> <ion-fab-list side="left">
> <button ion-fab mini class="adder" (click)="addNewProjectButton()"><ion-icon name="add-circle"></ion-icon>Project</button>
> <button ion-fab mini class="adder" (click)="addNewGroupButton()"><ion-icon name="add-circle"></ion-icon>Group</button>
>
> </ion-fab-list>
> </ion-fab>
Sorry if the console.logs and commented out code is distracting.
Any ideas for what is happening? If this is just a particular chrome emulator problem, then I don’t care. I just don’t want to have this show up in the wild if I can help it.
Thanks.
where the modal just added an entry to one of the group.projects lists.