Over translated when using expose-aside-when="large" at right side menu

1

When I used the expose-aside-when=“large” in the menu starter template and chose the right side menu, I found that when I clicked on the menu item, the menu content will be translated right 275px automatically when the screen size is over the “large” size, and therefore left a 275px wide blank area in the left side of the screen.
image

A quick sample in codepen.

when I click the interview item to show details, the blue content field just shifted to right side.

http://codepen.io/suyuz0629/pen/jPorVE

And I found that this error is caused by the setTranslateX in ionSideMenuContent directive.

as I changed

$element[0].style[ionic.CSS.TRANSFORM] = 'translate3d(' + xTransform + 'px,0,0)';

to below

if (amount) {
   $element[0].style[ionic.CSS.TRANSFORM] = 'translate3d(' + xTransform + 'px,0,0)';
} else {
   $element[0].style[ionic.CSS.TRANSFORM] = 'translate3d(0px,0,0)';
}

this error is fixed.
I think this is because when the menu is already toggled as screen size is over the large size, there is no need for the menu content to be translated anymore.

1 Like
2

So if you can replicate this in a code pen, save the code pen and open an issue on https://github.com/driftyco/ionic to have the devs fix it for the next version.

Great catch! I don’t think a lot of people have been doing any rigorous testing on iPads so issues like this are still pretty new

3

I’ve made a quick sample in codepen and reported this bug to ionic.
But I’m not quite sue whether the solution can solve all similar question relate to the the right side menu and it need further discussion.

1 Like
4

They’re pretty good about figuring things out on the github issues, just keep tabs on it :slight_smile: