Ion split pane option to position on the right side

[ar-daniel]

Feature Request

Ionic version:

[] 4.x [x] 5.x

Describe the Feature Request

Ion Split pane is current set with only one option to position on the left of the window ( and it is also by default ) Component attribute/ option to set the position to the right side of page is necessary ( same way as there is option in Menu component )

Describe Preferred Solution

To have a prop and corresponding position changes in the IonSplitPane component as 'side' with values start and end to position the pane left or right of the window, similar to whats available in IonMenu

Describe Alternatives

Related Code

Additional Context

There was an issue related to this in earlier version of ionic 2.x where the option to position the pane on the right was present. But got removed in later version > 4.x, I think

https://github.com/ionic-team/ionic-framework/issues/10903

[liamdebeasi]

Thanks for the issue. Could you please clarify the issue you are running into? The side prop on ion-menu should control which side the menu appears on when using ion-split-pane.

[ar-daniel]

Thanks for response, I'm using normal IonContent in the side pane and not using a IonMenu. and I not able to place it on the right side.

eg (taken from demo conference app )

....
        <IonApp >
          <IonReactRouter>
            <IonSplitPane contentId="main">

                <IonRouterOutlet id="main">
                  <Route path="/tabs" component={MainTabs} />
                  .....
                </IonRouterOutlet>

                <IonContent >
                  <p> Right column content</p>
                </IonContent>

            </IonSplitPane>
          </IonReactRouter>
        </IonApp>
....

[liamdebeasi]

Thanks! So IonSplitPane is really only intended to be used with IonMenu, not IonContent directly. That being said, you should still be able to position the IonContent using CSS:

ion-content {
  order: 1;
  border-inline-start: var(--border);
}

The --border variable is inherited from IonSplitPane. Can you give that a try and let me know if it works?

[ar-daniel]

Thanks for quick response, will give a try. (will consider using CSS class instead of ion-content tag name, so that is doesn't affect the other ion-contents in the app ). Please give time, will respond with findings.

[ar-daniel]

@liamdebeasi setting the css property order:1; made the pane to display on the right, but not able to see any effect of border-inline-start: var(--border); as it works same without it.

Thank you for the solution. you may close the issue.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.