Split pane

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