[TIMOB-26221] iOS : ScrollView content scrolling vertically in bigger iPads when using percent-based layout
| GitHub Issue | n/a |
|---|---|
| Type | Story |
| Priority | None |
| Status | Closed |
| Resolution | Done |
| Resolution Date | 2018-07-20T14:53:31.000+0000 |
| Affected Version/s | n/a |
| Fix Version/s | n/a |
| Components | iOS |
| Labels | n/a |
| Reporter | Riduanul Islam |
| Assignee | Hans Knöchel |
| Created | 2018-07-20T13:24:49.000+0000 |
| Updated | 2018-08-06T17:34:44.000+0000 |
Description
Hello,
The customer is using the scrollView with Horizontal layout and adding the required UI elements to a main view and adding it back to the actual scrollview. Even after fixing the height of scrollView equal to that of main view inside it, its still scrolling vertically which is not an expected behaviour.
The sample code to replicate the issue in iPAD pro 12.9 inch (2nd generation) and other bigger iPAD's.
*Sample code:*
var window = Ti.UI.createWindow();
var osname = Ti.Platform.osname;
function pixelsToDipUnits(pixels) {
if ((osname === 'iphone') || (osname === 'ipad')) {
return pixels;
}
if (Titanium.Platform.displayCaps.dpi > 160)
return (pixels / (Titanium.Platform.displayCaps.dpi / 160));
else
return pixels;
};
Ti.App.PLATFORM_HT = pixelsToDipUnits(Ti.Platform.displayCaps.platformHeight);
Ti.App.PLATFORM_WD = pixelsToDipUnits(Ti.Platform.displayCaps.platformWidth);
var scrollView = Ti.UI.createScrollView({
height : 0.09 * Ti.App.PLATFORM_HT,
top : 8,
verticalBounce : false,
width : Ti.UI.FILL,
layout : 'horizontal',
bubbleParent : false,
borderColor : 'green',
backgroundColor : 'white',
scrollType : 'horizontal'
});
for (var i = 0; i < 10; i++) {
var mainSubView = Ti.UI.createView({
height : 0.09 * Ti.App.PLATFORM_HT,
backgroundColor : 'white',
width : 0.22 * Ti.App.PLATFORM_WD,
borderColor : 'red'
});
var subView = Ti.UI.createView({
width : 0.22 * Ti.App.PLATFORM_WD,
layout : 'vertical',
height : Ti.UI.SIZE,
borderColor : 'blue'
});
subView.add(Ti.UI.createImageView({
image : '/clock.png',
touchEnabled : false,
height : Ti.UI.SIZE
}));
mainSubView.add(subView);
scrollView.add(mainSubView);
}
window.add(scrollView);
window.open();
Attachments
| File | Date | Size |
|---|---|---|
| clock.png | 2018-07-20T13:24:24.000+0000 | 2048 |
| TIMOB-26221.mp4 | 2018-07-20T14:06:23.000+0000 | 261140 |
It works fine for me, no vertical scrolling occurs. See the video attached. Using iOS 11.4 and Xcode 9.4. *EDIT*: That was on a 9.7" one. I can reproduce it on a 12.9" one, which leads me to the thought that the scale factor and/or dpi's may be different and therefore need to be respected in calculating the height.
Ok, found the issue - and not really an issue. The problem is that iOS is not really the biggest friend of percentage based calculations (does not support it), but we do. But if a percentage based calculation results in a floating number (in this case 122.94), it cannot pass it to the layout system properly and uses CGSizeZero instead. Long story short, you just need to round the number and it works fine, e.g.
Math.ceil(0.09 * Ti.App.PLATFORM_HT).Closed as completed. If this is in error, please reopen.