I am trying to click into and use a google map view together with a sheet modal.
However, when the modal is open clicks do not make it to the map.
Is it because of the background dismiss? How can I have both items open at the same time so that taps into the map will change the sheet modal content?
<ion-content>
<div class="map-wrapper">
<div id="map" #map></div>
</div>
<ion-modal id="mapModal #mapModal"
[isOpen]="mapModalIsOpen"
[initialBreakpoint]="0.1"
[breakpoints]="[0.1, 0.25, 0.5, 0.75]"
handleBehavior="cycle"
[backdropDismiss]="false"
>
<ng-template>
<ion-content class="ion-padding">
<ion-button click="breakpoint()" expand="block">ASDF</ion-button>
</ion-content>
</ng-template>
</ion-modal>
</ion-content>
Trick is to use backdropBreakpoint as per the documentation.
Related
I'm creating a web app and i want it to be in a consistent split pane mode so i declared it in app.component.html as
<ion-app>
<ion-split-pane contentId="main-content">
<ion-menu contentId="main-content" type="overlay">
<ion-header>
<ion-toolbar>
...
and for every other page my header looks like this
<ion-header>
<ion-toolbar color="danger">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title class="ion-text-center">Details</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="content">
<ion-toolbar>
...
and it works perfectly.
Now, I've decided to add a landing page to my app which can have basic info and a sign in/up button. But when i create a page I'm not able to disable the split pane.
So far Ive tried removing the header section from the landing page's html and adding
constructor(public menuCtrl: MenuController) {this.menuCtrl.enable(false); }
to the landing page's .ts file but nothing works and its always showing the split pane which was the point but i just need one page without it.
Any ideas or tips??
Add a reference to your split pane tag named #ionSplitPane:
Html:
<ion-split-pane contentId="main-content" #ionSplitPane>
Ts:
//import ....
import { IonSplitPane } from '#ionic/angular';
//import .....
#ViewChild('ionSplitPane') ionSplitPane!: IonSplitPane;
constructor(){}
disableIonSplitPange(){
this.ionSplitPane.disabled = true;
}
I created my Ionic app with the wizard on their page and chose the template "menu". If I look at my app in the desktop version, it is totally ok as you can see here: Desktop view OK
BUT IF I switch to the "mobile view" in my Browser (Firefox), the menu does not show up??
As you can see here: Mobile view no menu
This is my html code for the menu:
<ion-app>
<ion-split-pane contentId="main-content">
<ion-menu contentId="main-content" type="overlay">
<ion-content>
<ion-list id="inbox-list">
<ion-list-header>Netzwerkverwaltung</ion-list-header>
<ion-note></ion-note>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
<ion-item routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" routerLinkActive="selected">
<ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
<ion-label>{{ p.title }}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
</ion-split-pane>
</ion-app>
You put your ion-menu inside of an ion-split-pane.
So the visibility depends on the width of the windows!
U can open your sidemenu from mobile using a swipe from the border of
the side of the menu.
Using menuController.toggle()
Or using ion-menu-button inside the ion-header!
The menu is hidden on smal screens!!
Docs:
IonMenuButton: https://ionicframework.com/docs/api/menu-button
MenuToggle: https://ionicframework.com/docs/api/menu-toggle
MenuController: https://ionicframework.com/docs/v4/api/menu-controller
[Print screen] [1]: https://i.stack.imgur.com/VWLBX.png
and this is the home.page.html
<ion-header >
<ion-toolbar >
<ion-title>HOME</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<div [innerHTML] id="days"></div>
</ion-content>
Ionic 4 has a bunch of changes and the onClick is no longer valid. You should use <ion-button (click)="myCallback()">
I'm trying to implement load more functionality in the half portion of the page.
So I put that code inside the ion-scroll but somehow current implementation is not working i.g. the method is
(ionInfinite)="doInfinite($event)"
is not triggered and loader UI is not rendered. However, the same implementation is working if the content placed in ion-content instead of ion-scroll.
<ion-content padding>
<ion-scroll scrollY="true" id="accountList" class="list-box">
<ion-list >
<ion-item *ngFor="let item of [1,2,3,4,5,6,7,8,9]">
<ion-icon ios="ios-add-circle" md="ios-add-circle" item-start color="secondary"></ion-icon>
Item1
<ion-buttons item-end>
<button ion-button clear icon-only color="orange">
<ion-icon ios="md-create" md="md-create" item-end ></ion-icon>
</button>
<button ion-button clear icon-only color="danger">
<ion-icon ios="md-close" md="md-close" item-end></ion-icon>
</button>
</ion-buttons>
</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-scroll>
</ion-content>
Sorry for my bad english, but I resolved this problem by using below code:
<ion-scroll #scrollWeb scrollY="true" class="scroll-y">
<ion-grid>
<ion-row>
<ion-col col-4 col-sm-6 col-md-4 col-lg-4 col-xl-4 *ngFor="let item of items">
<item-card [item]="item"></item-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-scroll>
And on my component:
#ViewChild('scrollWeb') scrollWeb: Scroll;
Added listener on DOM Element to discover if the scroll arrived in the end as follows:
ngAfterViewInit() {
if (this.scrollWeb) {
this.scrollWeb.addScrollEventListener((ev) => {
if ((ev.target.offsetHeight + ev.target.scrollTop) >= ev.target.scrollHeight) {
this.doInfinite(null);
}
});
}
}
In doInfinite function you can omit or show a loader as follows:
if (infiniteScroll !== null) {
infiniteScroll.complete();
}
Ionic-version: 3.9.2
I have a similar problem in the component. My solution was:
Replace <ion-scroll> with <ion-content>
Add overflow: auto; style for <ion-content>
Enjoy virtual scrolling
You need call the $event.complete() method. From the Ionic documentation page of InifniteScroll:
"The expression assigned to the infinite event is called when the user
scrolls to the specified distance. When this expression has finished
its tasks, it should call the complete() method on the infinite scroll
instance."
ion-Scroll doesn't fire scroll events right now, thus ion-infinite-scroll subscription to scroll events is not fired.
You can try to find some workarounds like firing similar event yourself. I just desided to emulate visual similarity in regular ion-content using css for now (not perfect solution).
Link to issue on Ionic Github: https://github.com/ionic-team/ionic/issues/13904
Link to issue on forum: https://forum.ionicframework.com/t/ionscroll-event-doesnt-fire-on-ion-scroll/96188/3
I am trying to run my ionic app with xcode by doing:
ionic package build ios
ionic cordova prepare
Then I open up xcode and do Clean and Run. When on the device the scrolling acts like this:
My HTML looks like this:
...
<ion-content no-padding>
<div (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')">
<div class ='contentone' [#moveList]='moveState'>
<ion-list class="marginstatus" no-padding>
<ion-item class="changepadding" *ngFor="let z of items ; let i = index" (click)='expandItem(i)' id='{{i}}' #feedstyle text-wrap>
<div class="flex" #flex>
<div class="nonzoomimage">
<img class="imagepost" src="{{z.pic}}">
</div>
<div class="descholder">
<div class='description'>{{z.description}}</div>
<div class='link'>{{z.link}}</div>
</div>
</div>
<div class="feedtoptextcontainer" #feedtop>
<div class="imageparent">
<img class="postprofilepic" src="{{z.pic}}">
</div>
<div class="usernamecontainer">
<h4 class="postusername">Ed Bundy</h4><br>
<h4 class="poststudio">Ed's Studio</h4>
</div>
<div class="postprofilelink">
<div class="book">Book</div> #edbundyhair
</div>
</div>
<img class="imageposttwo" #imagepost src="{{z.pic}}">
</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite())">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>
</div>
</ion-content>
...
My doInfinite function, of ion-infinite-scroll looks like this, it is empty, just a placeholder right now - it does nothing:
doInfinite(): Promise<any> {
console.log('Begin async operation');
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, 500);
})
}
It just glitches when you try to scroll - and doesn't scroll at all, doInfinite fires because I can see the log message.
Ionic by default uses the Ionic scroll, which simulates the Momentum Scrolling as seen on the iOS devices, by adding the overflow-scroll=true attribute, it will basically use this particular ion-content to use the native scrolling (if you want a global effect check out the following link.
http://ionicframework.com/docs/v1/api/provider/$ionicConfigProvider/
Please also check if css classes are affecting the style of the element!
Is it only doing the bug when you scroll upwards? If yes, try to check this:
ion-infinite-scroll fires when scrolling up - Ionic
Can you try to start with and build something simple like this?
<ion-infinite-scroll (ionInfinite)="fetchMore($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
and on your .ts
fetchMore(event) {
console.log('Begin fetching more data');
setTimeout(() => {
console.log('Async operation has ended');
event.complete();
}, 500);
}
Not sure why your code would cause that glitch but if you happen to make something simple as this work, you'll find out what causes the bug as you build it back up to what you have.
Could be that the $event.waitFor() still has its issues. If you need to wait for a promise like when you're fetching more data. you can have something like this.
fetchMore(event) {
this.fetchingDataService.fetchPromise().then(
(moreData) => {
//append moreData
event.complete();
},
(err) => {
//do something with error
event.complete();
}
);
}
Found the problem. After upgrading to Ionic 3, at least in my case, the swipe event on an ion-list in an ion-scroll freeze my scroll.
<ion-scroll scrollY="true">
<ion-list padding (swipe)="someThing($event)"> <!-- There, swipe, removing it make my ion-scroll scrollable again -->
<ion-item>
<p>1</p>
</ion-item>
....
<ion-item>
<p>9999</p>
</ion-item>
</ion-list>
</ion-scroll>