Hello,
I have a little Problem with ionic split pane. Here you can see my split pane. Look exactly like I would but when i run this on iOS the menu wont collapse.
I know that the problem is that I have two ion-content tags. I marked it in the source Code. But when I replace this ion-content with div or span then the Content don’t fill the complete right side.
When I remove the first Content then the Toolbar overlays the Content and the menu.
So I would be very happy when somone could Show me a baisc html-code to build my layout.
Thanks in advance.
Here is a screenshot:
Here is my Code:
<ion-header>
<ion-toolbar color="weeklystyle">
<button ion-button menuToggle>
<ion-icon name='menu'></ion-icon>
</button>
<ion-title>
WeeklyStyle
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-split-pane when = "lg">
<ion-menu [content]="mycontent">
<ion-content class="menu-gradient">
<div class="spacer" style="width: 254px; height: 10px;"></div>
<div class="category-image">
<img src="assets/img/weeklyStyle/category.png" style="display: block; width: 60%; height: auto; margin-left: auto; margin-right: auto;">
</div>
<!--h3 id="menu-heading1" style="color: rgb(255, 255, 255); font-weight: 400; text-align: center;">{{categoryString}}</h3-->
<div class="spacer" style="width: 254px; height: 5px;"></div>
<ion-list>
<button ion-item (click)="goToPageMusic()" class="menu-item" menu-close="" active-page-highlight="">
Musik
</button>
<button ion-item (click)="goToPageEvents()" class="menu-item" menu-close="" active-page-highlight="">
Events
</button>
<button ion-item (click)="goToPageImpressum()" class="menu-item" menu-close="" active-page-highlight="">
Impressum
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav id="nav" main #mycontent [root]="rootPage"></ion-nav>
<ion-content> <!-- HERE IS THE PROBLEM. The ion-content is not allowed for ios.-->
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<ion-grid *ngIf = "count >= 3">
<ion-row>
<ion-col col-12 col-sm-12 col-md-12 col-lg-6 col-xl-4 *ngFor="let overview of overviewList" (click)="goToSubPage(overview.category, overview.category_id)">
<ion-item>
<ion-thumbnail item-left>
<img src="{{overview.image_url}}">
</ion-thumbnail>
<span class="list-item-titel">{{overview.title}}</span><br>
<span class="list-item-sub-titel">{{overview.subtitle}}</span><br>
<span class="list-item-text">{{overview.teaser}}</span><br>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid *ngIf = "count < 3">
<ion-row>
<ion-col col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 *ngFor="let overview of overviewList" (click)="goToSubPage(overview.category, overview.category_id)">
<ion-item>
<ion-thumbnail item-left>
<img src="{{overview.image_url}}">
</ion-thumbnail>
<span class="list-item-titel">{{overview.title}}</span><br>
<span class="list-item-sub-titel">{{overview.subtitle}}</span><br>
<span class="list-item-text">{{overview.teaser}}</span><br>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
</ion-split-pane>
</ion-content>
When I Change the wrong Content tag to ion-card i got this result:
Here is my solution for this Problem:
<ion-content>
<ion-header>
<ion-toolbar color="weeklystyle">
<button ion-button menuToggle>
<ion-icon name='menu'></ion-icon>
</button>
<ion-title>
WeeklyStyle
</ion-title>
</ion-toolbar>
</ion-header>
<ion-split-pane when = "lg">
<ion-menu [content]="mycontent">
<ion-content class="menu-gradient">
<div class="spacer" style="width: 254px; height: 10px;"></div>
<div class="category-image">
<img src="assets/img/weeklyStyle/category.png" style="display: block; width: 60%; height: auto; margin-left: auto; margin-right: auto;">
</div>
<!--h3 id="menu-heading1" style="color: rgb(255, 255, 255); font-weight: 400; text-align: center;">{{categoryString}}</h3-->
<div class="spacer" style="width: 254px; height: 5px;"></div>
<ion-list>
<button ion-item (click)="goToPageMusic()" class="menu-item" menu-close="" active-page-highlight="">
Musik
</button>
<button ion-item (click)="goToPageEvents()" class="menu-item" menu-close="" active-page-highlight="">
Events
</button>
<button ion-item (click)="goToPageImpressum()" class="menu-item" menu-close="" active-page-highlight="">
Impressum
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav id="nav" main #mycontent [root]="rootPage"></ion-nav>
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<ion-grid *ngIf = "count >= 3">
<ion-row>
<ion-col col-12 col-sm-12 col-md-12 col-lg-6 col-xl-4 *ngFor="let overview of overviewList" (click)="goToSubPage(overview.category, overview.category_id)">
<ion-item>
<ion-thumbnail item-left>
<img src="{{overview.image_url}}">
</ion-thumbnail>
<span class="list-item-titel">{{overview.title}}</span><br>
<span class="list-item-sub-titel">{{overview.subtitle}}</span><br>
<span class="list-item-text">{{overview.teaser}}</span><br>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid *ngIf = "count < 3">
<ion-row>
<ion-col col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 *ngFor="let overview of overviewList" (click)="goToSubPage(overview.category, overview.category_id)">
<ion-item>
<ion-thumbnail item-left>
<img src="{{overview.image_url}}">
</ion-thumbnail>
<span class="list-item-titel">{{overview.title}}</span><br>
<span class="list-item-sub-titel">{{overview.subtitle}}</span><br>
<span class="list-item-text">{{overview.teaser}}</span><br>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-split-pane>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
And with a Little bit css:
page-home {
$MENU_TOP: #dd3333;
$MENU_BOTTOM: #dd3333; //#ff9068
$MENU_TRANSPARENCY: rgba(255,255,255,0.4);
$SPLIT_TOP: 56px;
ion-header {
position: absolute;
min-height: 56px;
}
.toolbar-ios {
padding: 4px;
min-height: $SPLIT_TOP;
}
.toolbar-wp {
padding: 4px;
min-height: $SPLIT_TOP;
}
.split-pane {
position: absolute;
top: $SPLIT_TOP;
}
ion-menu[type="overlay"] {
z-index: 80;
position: fixed;
top: $SPLIT_TOP;
}
ion-menu[type="reveal"] {
z-index: 80;
}
.menu-item{
background:none;
color:white;
font-weight:300;
border:0px;
.item-content{
background:none;
&.activated{
background: $MENU_TRANSPARENCY;
}
}
&.active-page-highlight{
.item-content{
background: $MENU_TRANSPARENCY;
}
}
}
.menu-gradient{
background: -webkit-linear-gradient(left top, $MENU_TOP, $MENU_BOTTOM);
background: -o-linear-gradient(bottom right, $MENU_TOP, $MENU_BOTTOM);
background: -moz-linear-gradient(bottom right, $MENU_TOP, $MENU_BOTTOM);
background: linear-gradient(to bottom right, $MENU_TOP, $MENU_BOTTOM);
}
.category-image{
img{
border-radius:50%;
margin:10px;
border: 4px solid $MENU_TRANSPARENCY;
-webkit-box-shadow: 0px 0px 142px -37px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 142px -37px rgba(0,0,0,0.75);
box-shadow: 0px 0px 142px -37px rgba(0,0,0,0.75);
}
}
}
Important!!! The infinite-scrool must be outside the split pane but inside the Content.
After some more weeks of learnig ionic i make this template:
You can try it here:
http://splitpane.jacktools.net/
The code is on github
https://github.com/Jacktoolsnet/splitPaneTemplate
This is the result:
1 Like
