Width of <ion-slide> is not calculated correctly when expose-aside-when="large"

ionic-v1
1

My project includes ion-side-menu for left side… which will automatically be exposed on iPad / tablet devices. I am also using ion-slide-box in one of my pages to mimic image carousel. All are simple as follows and I am pretty sure that I am not making any technical issues in my scripts.

<ion-side-menu expose-aside-when="large" side="left">
   ...
</ion-side-menu>

...
<ion-slide-box>
   <ion-slide ng-repeat="...">
      ...
   </ion-slide>
</ion-slide-box>

Everything looks great unless I am testing them on my iPad / tablets (with big resolutions). In such cases, I found that width of each ion-slide is not correctly calculated when expose-aside-when directive is in action. Actually it’s same as width of whole screen, but I believe it should be the one which deducted the width of side menu from width of whole screen.

As a result, all the objects on each ion-slide are shifted right. Please resolve this issue.

1 Like
2

I am also having this issue. Using ion-slide-box-tabs inside ion-side-menus and then adding the expose-aside-when=“large” to the side-menu causes problems.

At certain screen widths I see the content of other tabs or sometimes the content of the active slide is cut off. It appears it is calculating the width of the visible space incorrectly.

In the attached image, “Rece” on the right is part of another tab. And you can see the incorrect pixel width in the dev tools:

image
Screenshot 2015-07-13 13.47.32.png2440×1336 756 KB

ionic info:
Cordova CLI: 5.1.1
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.0
Ionic Version: 1.0.1
Ionic CLI Version: 1.6.1
Ionic App Lib Version: 0.3.3
ios-deploy version: 1.7.0
ios-sim version: 4.1.1
OS: Mac OS X Yosemite
Node Version: v0.12.1
Xcode version: Xcode 6.4 Build version 6E35b

3

I tried removing expose-aside-when=“large”, and though it works better, it is still sometimes calculating the width wrong.

This is after stretching the browser window wide and then narrow. Simulating going from landscape to portrait.

image
Screenshot 2015-07-13 17.05.43.png412×738 101 KB

4

The same issue here. As @chriseen said I believe it should be the one which deducted the width of side menu from width of whole screen. It would be great if ionic team member can clarify whether it is by design? Thank you in advance.

5

I have the same issue, when testing on a real device (Samsung Galaxy tablet).

When I use “expose-aside-when”, and the side menu is “permanently” showing on a “wide” screen (tablet in landscape mode), then the layout of the slides (slide box) is incorrect.

What I see is that the contents of the slides are not getting centered correctly.

The obvious cause seems to be that the calculations are using the “wrong” width, i.e. the width of the whole screen (including side menu) instead of the width of just the slide-box (excluding the side menu).

Note: this seems device specific (I saw it happening on a Samsung Galaxy tablet), with “ionic serve” it seems to work fine.
So it’s not that easy to reproduce/pin down, hence also not easy to solve I’m afraid.