I am using super-tab in home page of my ionic app. The problem is whenever i navigate from any tab to another child page and return back the first tab content showing. But tab indicator showing correct tab. The problem is only with iOS devices. It works perfectly on android devices.
home.page.html
<super-tabs>
<super-tabs-toolbar slot="top" scrollable scrollable-padding="false">
<super-tab-button>
<ion-label>Dashboard</ion-label>
</super-tab-button>
<super-tab-button>
<ion-label>Tab 1</ion-label>
</super-tab-button>
<super-tab-button>
<ion-label>Tab 2</ion-label>
</super-tab-button>
<super-tab-button>
<ion-label>Tab 3</ion-label>
</super-tab-button>
<super-tab-button>
<ion-label>Tab 4</ion-label>
</super-tab-button>
<super-tab-button>
<ion-label>Tab 5</ion-label>
</super-tab-button>
</super-tabs-toolbar>
<super-tabs-container>
<super-tab>
<ion-nav [root]="tab0"></ion-nav>
</super-tab>
<super-tab>
<ion-nav [root]="tab1"></ion-nav>
</super-tab>
<super-tab>
<ion-nav [root]="tab2"></ion-nav>
</super-tab>
<super-tab>
<ion-nav [root]="tab3"></ion-nav>
</super-tab>
<super-tab>
<ion-nav [root]="tab4"></ion-nav>
</super-tab>
<super-tab>
<ion-nav [root]="tab5"></ion-nav>
</super-tab>
</super-tabs-container>
</super-tabs>
I had a similiar issue. And the problem was that i used a viewChild inside one tab and used child.scrollIntoView().
The behaviour was like yours - the first tab was active but the content of the tab where i used the scrollIntoView method was shown.
Maybe this is helpful.
Best Axel
Related
Brief Explanation: I am using ionic split pane in my project. I want to decrease , increase left pane width by clicking a button.
Below is my app.html code:
<ion-split-pane>
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" main #content></ion-nav>
</ion-split-pane>
This is how my home page looks
Please guide How to achieve this.
This is given in the documentation here
<ion-split-pane [when]="showSplitPane">
...
</ion-split-pane>
and when clicking on the button you can toggle the showSplitPane variable.
I have a mobile app/website (in Ionic 3.25) under construction and wanted to support the desktop web browser experience without wasting all that screen space. I stumbled across Ion-Split-Pane. It seemed perfect from the documentation, allowing me to pop open the sidemenu as a full menu when a large screen was used. I set the code as recommended in the app.html file:
<ion-split-pane when="md">
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
</ion-split-pane>
The behavior I'm getting when using Ionic Serve is baffling. When I use a large screen (above somewhere around 922 pixels wide), I get a three pane experience, with a bunch of whitespace containing nothing in the far right. This was surprising, since I thought the app would use the available space:
When I then shrink below that size, the entire website/app disappears. The elements are still in the html, but nothing is drawn to the screen.
This behavior is so far from the documentation that I must have something wrong, but I'm not certain what. Anyone know how I could get this panel working?
After working on this for a while, I discovered my problem. It isn't mentioned explicitly in the documentation, so I'll post the answer here in case anyone else runs into it.
When converting a side-menu project to use Ion-Split-Pane, the content section needs to have the main keyword added to the <ion-nav> object. #content and [root] are not enough.
The amended code:
<ion-split-pane when="md">
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" main #content swipeBackEnabled="false"></ion-nav>
</ion-split-pane>
Without that line, the entire application is thrown into the 'menu' pane and simply disappears when going to the mobile view.
I am developing an ionic app with a side menu, I want to animate the list items on the side menu when it is toggled open using animate.css. To do this when the menu is opened I add a css class to the menu items. When the menu is closed I remove the class.
I did some research and found some event listeners that were added to ionic which I tried:
<ion-menu [content]="content" class="sidemenu-header" (ionOpen)="toggleMenuState()" (ionClose)="toggleMenuState()">
<ion-header>
<ion-toolbar>
<img src="./assets/imgs/sidebar-header-icon.png" class="icon"/>
<ion-title>
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="sidemenu-content" (click)="toggleMenuState()">
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"
[ngClass]="{'test-class': isMenuOpen === true}">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
Now when the menu is opened the class get's added however when I click outside the menu to close the it the classes do not get removed.
How do I do this?
I try to make a little app in ionic2 to learn about it but I have a problem with navigation.
In fact I have well understand the difference between a rootpage (change whit nav.setRoot) and a "normal" page (add with nav.push). The thing is for my app I'll need to be able to open a side menu (this is ok if I'm on a rootpage but not it's not ok with the second type of page) and to be able to go back (this is ok with a push page but not with a rootpage).
So for me this type of page should be push and not a root page but how repear side menu on this type of page?
Thank you.
EDIT:
What about using persistent="true" in your ion-menu item? Like you can see in Ionic2 docs:
Persistent Menus Persistent menus display the MenuToggle button in the
NavBar on all pages in the navigation stack. To make a menu persistent
set persistent to true on the element. Note that this will
only affect the MenuToggle button in the NavBar attached to the Menu
with persistent set to true, any other MenuToggle buttons will not be
affected.
So your app.html woul be:
<ion-menu [content]="content" persistent="true">
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
<button menuClose ion-item (click)="logout()">Logout</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
I try to make a little app in ionic2 to learn about it but I have a problem with navigation.
In fact I have well understand the difference between a rootpage (change whit nav.setRoot) and a "normal" page (add with nav.push). The thing is for my app I'll need to be able to open a side menu (this is ok if I'm on a rootpage but not it's not ok with the second type of page) and to be able to go back (this is ok with a push page but not with a rootpage).
So for me this type of page should be push and not a root page but how repear side menu on this type of page?
Thank you.
EDIT:
What about using persistent="true" in your ion-menu item? Like you can see in Ionic2 docs:
Persistent Menus Persistent menus display the MenuToggle button in the
NavBar on all pages in the navigation stack. To make a menu persistent
set persistent to true on the element. Note that this will
only affect the MenuToggle button in the NavBar attached to the Menu
with persistent set to true, any other MenuToggle buttons will not be
affected.
So your app.html woul be:
<ion-menu [content]="content" persistent="true">
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
<button menuClose ion-item (click)="logout()">Logout</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>