i’m using ion-menu : i can say it’s fine on android except that in rtl direction it open from left to right.
but on ios when change the direction to rtl the ui of the menu damaged. the menu stay on the left side
but the content move to the right of the menu : means the half of the content appears and the second half disappears behind the menu.
anyone knows how to solve it.
Sure, as I mentioned before, rtl is work in progress, and especially menu.
menu is not the highest priority, as there is a need to fix some basics first, but it is up there with the most needed PRs to merge.
In this rate, it does not seem like the menu changes will make it to v3.4.0, so hopefully v3.5.0
Please be patient, as there is literally nothing I or you can do at this point to make things merge faster, as it is based on the time limitations the ionic team has.
i solved it by workarround with css ,
i did two menus one for rtl side (right) and another for ltr (left)
and i added the following to the app.scss file :
[dir="rtl"]{
ion-menu[side=right] > .menu-inner {
right: 0;
direction: ltr;
}
ion-menu[side=right] ion-icon[aria-label^="arrow"]::before, ion-icon[flip-rtl]::before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
margin-left: 8px;
}
}
I am not sure why are you using direction: ltr while in rtl mode. note that ionic does not support nested directions, not now at least. (Still trying to merge proper RTL)
About the arrow flipping - on rtl, all arrows need to be flipped. Why are you flipping them back?
1)because when i’m rtl mode : you can see in element section (f12=> elements) :
the ion-menu takes side=“right” , so in rtl you need to change the right to 0 . to appear in right side.
2) direction = ltr becasue the icons ( > : arrrows) goes to the right also so i need to put it in the left :
so i put direction :ltr;
3) when the arrows go to left side they still flipped to the right direction so i want to flipped again to the initial position.
Try adding type=“overlay” to the sidemenu:
<ion-menu [content]=“content” type=“overlay” >
it throws an error : `core.js:3565 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
util.js:60 Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
cordovaWarn @ util.js:60
checkAvailability @ plugin.js:23
callCordovaPlugin @ plugin.js:107
(anonymous) @ plugin.js:261
value @ decorators.js:132
(anonymous) @ app.component.ts:31
t.invoke @ polyfills.js:3
onInvoke @ core.js:4629
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
(anonymous) @ polyfills.js:3
t.invokeTask @ polyfills.js:3
onInvokeTask @ core.js:4620
t.invokeTask @ polyfills.js:3
r.runTask @ polyfills.js:3
o @ polyfills.js:3
e.invokeTask @ polyfills.js:3
p @ polyfills.js:2
v @ polyfills.js:2
util.js:60 Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
cordovaWarn @ util.js:60
checkAvailability @ plugin.js:23
callCordovaPlugin @ plugin.js:107
(anonymous) @ plugin.js:261
value @ decorators.js:132
(anonymous) @ app.component.ts:32
t.invoke @ polyfills.js:3
onInvoke @ core.js:4629
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
(anonymous) @ polyfills.js:3
t.invokeTask @ polyfills.js:3
onInvokeTask @ core.js:4620
t.invokeTask @ polyfills.js:3
r.runTask @ polyfills.js:3
o @ polyfills.js:3
e.invokeTask @ polyfills.js:3
p @ polyfills.js:2
v @ polyfills.js:2
core.js:1350 ERROR Error: Uncaught (in promise): TypeError: menuTypes[type] is not a constructor
TypeError: menuTypes[type] is not a constructor
at Function.MenuController.create (menu-controller.js:314)
at Menu._getType (menu.js:330)
at menu.js:349
at new t (polyfills.js:3)
at Menu.setOpen (menu.js:347)
at Menu.toggle (menu.js:484)
at MenuToggle.toggle (menu-toggle.js:104)
at Object.eval [as handleEvent] (HomePage.html:3)
at handleEvent (core.js:13255)
at callWithDebugContext (core.js:14740)
at Function.MenuController.create (menu-controller.js:314)
at Menu._getType (menu.js:330)
at menu.js:349
at new t (polyfills.js:3)
at Menu.setOpen (menu.js:347)
at Menu.toggle (menu.js:484)
at MenuToggle.toggle (menu-toggle.js:104)
at Object.eval [as handleEvent] (HomePage.html:3)
at handleEvent (core.js:13255)
at callWithDebugContext (core.js:14740)
at c (polyfills.js:3)
at new t (polyfills.js:3)
at Menu.setOpen (menu.js:347)
at Menu.toggle (menu.js:484)
at MenuToggle.toggle (menu-toggle.js:104)
at Object.eval [as handleEvent] (HomePage.html:3)
at handleEvent (core.js:13255)
at callWithDebugContext (core.js:14740)
at Object.debugHandleEvent [as handleEvent] (core.js:14327)
at dispatchEvent (core.js:9704)
defaultErrorLogger @ core.js:1350
ErrorHandler.handleError @ core.js:1411
IonicErrorHandler.handleError @ ionic-error-handler.js:61
next @ core.js:5376
schedulerFn @ core.js:4223
SafeSubscriber.__tryOrUnsub @ Subscriber.js:238
SafeSubscriber.next @ Subscriber.js:185
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ core.js:4203
(anonymous) @ core.js:4651
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
NgZone.runOutsideAngular @ core.js:4577
onHandleError @ core.js:4651
t.handleError @ polyfills.js:3
r.runGuarded @ polyfills.js:3
(anonymous) @ polyfills.js:3
n.microtaskDrainDone @ polyfills.js:3
o @ polyfills.js:3
e.invokeTask @ polyfills.js:3
p @ polyfills.js:2
v @ polyfills.js:2
`