Ionic split pane 너비 문제 해결

tab과 sidemenu를 조합하여 사용하기 위해 split pane을 사용하던 중 안의 컨텐츠가 반 밖에 나오지 않는 문제 발생

<ion-split-pane>
  <ion-menu contentId="content">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
          <ion-item [routerLink]="p.url" routerDirection="root" [class.active-item]="selectedPath.startsWith(p.url)">
            <ion-label>{{p.title}}</ion-label>
          </ion-item>
        </ion-menu-toggle>

        <ion-item tappable routerLink="/login" routerDirection="root">
          <ion-icon name="log-out" slot="start"></ion-icon>
          Logout
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>
  
  <ion-router-outlet id="content" main style="width: 100%;"></ion-router-outlet>
</ion-split-pane>

구글링 중 split pane에도 contentId를 써줘야 한다는 해결방법을 찾음

<ion-split-pane contentId="content">
  <ion-menu contentId="content">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
          <ion-item [routerLink]="p.url" routerDirection="root" [class.active-item]="selectedPath.startsWith(p.url)">
            <ion-label>{{p.title}}</ion-label>
          </ion-item>
        </ion-menu-toggle>

        <ion-item tappable routerLink="/login" routerDirection="root">
          <ion-icon name="log-out" slot="start"></ion-icon>
          Logout
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>
  
  <ion-router-outlet id="content" main style="width: 100%;"></ion-router-outlet>
</ion-split-pane>

적용을 해주니 해결

 

[참고]

How to Combine Ionic 4 Tabs and Side Menu Navigation

Split pane content width