Duct Tape solutions as a workaround for an issue regarding rtl support with IonSplitPane

There was an old issue it wasn’t in react and it was in 2017

The same issue appears now in my app I am using the latest version of ionic and react.
I solved It with this workaround.
added " position: fixed;" to the css class of the menu this solved the problem but it introduced a different issue which is the menu getting berried under The routerOutlet render. I applied another workaround which is adding "z-index: 999"to the menu css class so it doesn’t; get berried under the routerOutlet now it works but it gave me one last issue which is a weird animation glitch (and becomes buggy for a little bit) that only disappears when reloading the page so I applied window.location.reload() to be called each time my menu switches sides for language changes. If anyone has any suggestions I appreciate it but if not my app works with these duct tape solutions lol. I aded a gif
showing the animation bugs that happen when I remove the window.location.reload()

OS: mac os monterey 12.4

Ionic-cli version: 6.20.1

Node version: v18.5.0

React version: 18.2.0

1 Like

Hello, you must add side="end" to ion-menu to fade it out to the right side correctly.

already did. this is the result it seems that the issue isn’t fixed in react but I am too afraid to post an issue on GitHub lol.

it works well for mobile view but big view it becomes an issue

Note that in RTL the whole menu should be in the right not just the content of the menu