Split Pane with Dynamic Theme

Ionic Framework ionic-v3
1

I’ve been racking my brain trying to figure out why split pane wasn’t working. After exhausting everything I’ve narrowed it down to my dynamic themes. I’ve combed through and inspected the css and their shouldn’t be anything that causes it to not show. I tripple checked its only color properties. I’ve also tried a different variety of enable and show attributes on

Does anyone know why this is the case? Do I need to add the css for splitpane to the dynamic theme .scss files?

When if I take away the [class] on both menu and nav it shows properly if not it’s hidden beneath the nav. with nav. in fullscreen and menu button disappears with no sidemenu showing?

<ion-split-pane when="lg">

     <ion-menu [content]="content" [class]="selectedTheme">
     </ion-menu>

     <ion-nav [root]="root" #content main [class]="selectedTheme" swipeBackEnabled="false"></ion-nav>

</ion-split-pane>
2

image
image.jpg373×665 67.7 KB

Try:

<ion-split-pane when="lg">

     <ion-menu [content]="content">
      ...
     </ion-menu>

     <ion-nav main [root]="root" #content swipeBackEnabled="false" [class]="selectedTheme"></ion-nav>

</ion-split-pane>

And:

ion-menu {

  ion-content {
    @include linear-gradient(left,$facebook-messenger);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    font-size: 1.8rem;

    div.scroll-content {
      color: white;

      ion-list .item {
        color: white;
        background: transparent;
      }
    }
  }

  .bar-buttons, .toolbar-title {
    color: white;
  }
}

.facebook-messenger-theme {

  ion-content {
    @include linear-gradient(left,$facebook-messenger);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
  }

}

See:

3

Thanks Robinyo for the quick response! (Oh btw I came across your blog post in the past. Great work!)

However, I just discovered the solution moments after this post (I’ve been stuck on this for the better part of the month).

When using [class]= ionic removes the split-pane classes from the html and instead only applies the theme class.

The solution when using dynamic themes is to use [ngClass] this allows additional classes and will not be strict allowing ionic to generate the side-pane classes.

Using [class]

<ion-menu class="theme-class"> and <ion-nav class="theme-class">

Using [ngClass]

<ion-menu class="theme-class split-pane-side"> and <ion-nav class="theme-class split-pane-main">

1 Like