# Split pane not showing

**URL:** <https://forum.ionicframework.com/t/split-pane-not-showing/115807>\
**Category:** ionic-v3\
**Created:** [December 19, 2017, 5:45am UTC](https://forum.ionicframework.com/t/split-pane-not-showing/115807 "2017-12-19T05:45:45Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![kcire0426](https://avatars.discourse-cdn.com/v4/letter/k/8491ac/32.png) [@kcire0426](https://forum.ionicframework.com/u/kcire0426)\
**Post date:** [December 19, 2017, 5:45am UTC](https://forum.ionicframework.com/t/split-pane-not-showing/115807/1 "2017-12-19T05:45:45Z")

</div>

Could anyone please check why this is not working? The split pane is not showing.

```auto
<ion-split-pane>

    <side-menu [content]="menuContent"></side-menu>

    <!-- the main content -->
    <ion-nav [root]="rootPage" main #menuContent></ion-nav>
   
</ion-split-pane>

```

I just make a custom component for the menu and created content input for the component.

```auto

    <ion-menu [content]="menuContent">
        <ion-header>
        <ion-toolbar>
            <ion-title>Menu</ion-title>
        </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-list>
                <button ion-item>Components</button>
            </ion-list>
        </ion-content>
    </ion-menu> 

```

---

<div class="post-metadata">

**Author:** ![aec4444](https://avatars.discourse-cdn.com/v4/letter/a/71c47a/32.png) [@aec4444](https://forum.ionicframework.com/u/aec4444)\
**Post date:** [May 17, 2018, 12:41pm UTC](https://forum.ionicframework.com/t/split-pane-not-showing/115807/2 "2018-05-17T12:41:06Z")

</div>

Im having the same problem. If I put the menu directly below ion-split-pane it works, but if I have it in a custom component, it does not.

---

<div class="post-metadata">

**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\
**Post date:** [May 17, 2018, 10:49pm UTC](https://forum.ionicframework.com/t/split-pane-not-showing/115807/3 "2018-05-17T22:49:27Z")

</div>

See: [Reusable Grid Component To Host Pages](https://forum.ionicframework.com/t/reusable-grid-component-to-host-pages/130562/4?u=robinyo)

---

<div class="post-metadata">

**Author:** ![aec4444](https://avatars.discourse-cdn.com/v4/letter/a/71c47a/32.png) [@aec4444](https://forum.ionicframework.com/u/aec4444)\
**Post date:** [May 18, 2018, 12:59pm UTC](https://forum.ionicframework.com/t/split-pane-not-showing/115807/4 "2018-05-18T12:59:28Z")

</div>

I’m not sure how this helps? I have my ion-menu inside a custom component so I can reuse it between our apps (I have a private npm registry where I register this module). Because of that, the ion-split-pane doesn’t seem to work. If i take the same markup that’s in the component and put it right on my app.component, it does work. Its like ion-split-pane doesn’t know how to work with my component. is there an interface I should be implementing in my component so it is picked up?

---

<div class="post-metadata">

**Author:** ![robinyo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robinyo/32/115964_2.png) [@robinyo](https://forum.ionicframework.com/u/robinyo)\
**Post date:** [May 18, 2018, 8:48pm UTC](https://forum.ionicframework.com/t/split-pane-not-showing/115807/5 "2018-05-18T20:48:09Z")

</div>

> [@aec4444](#):
>
> I have my ion-menu inside a custom component

What does your SharedModule look like?

For example:

```auto
import { CUSTOM_ELEMENTS_SCHEMA, NgModule, } from '@angular/core';
import { CommonModule } from '@angular/common';

import { IonicModule } from 'ionic-angular';

import { MediaComponent } from '@shared/media/media.component';
import { RatingComponent } from '@shared/rating/rating.component';

@NgModule({
  imports: [CommonModule, IonicModule],
  exports: [MediaComponent, RatingComponent],
  declarations: [MediaComponent, RatingComponent],
  providers: [],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class SharedModule {}

```

See: [Angular](https://angular.io/guide/styleguide#shared-feature-module)

---

<div class="post-metadata">

**Author:** ![aec4444](https://avatars.discourse-cdn.com/v4/letter/a/71c47a/32.png) [@aec4444](https://forum.ionicframework.com/u/aec4444)\
**Post date:** [May 21, 2018, 2:10pm UTC](https://forum.ionicframework.com/t/split-pane-not-showing/115807/6 "2018-05-21T14:10:27Z")

</div>

> [@robinyo](#):
>
> CUSTOM\_ELEMENTS\_SCHEMA

I did notice that the menu does flicker opened but then disappears entirely when the first component’s template loads in the ion-nav.

My component looks almost identical. The difference is I have a forRoot in the module body but that is working as the custom component works when not within a split-pane.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:58pm UTC](https://forum.ionicframework.com/t/split-pane-not-showing/115807/7 "2021-07-19T21:58:58Z")

</div>