[TIMOB-5185] Resizing label on orientationchange messes up bottom of page
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | Low |
Status | Closed |
Resolution | Cannot Reproduce |
Resolution Date | 2017-06-07T17:58:20.000+0000 |
Affected Version/s | n/a |
Fix Version/s | n/a |
Components | iOS |
Labels | n/a |
Reporter | Jeroen van Vianen |
Assignee | Ingo Muschenetz |
Created | 2011-07-17T13:15:48.000+0000 |
Updated | 2017-06-07T17:58:20.000+0000 |
Description
I have a TableView with rows containing Labels to enable spanning multiple rows of text in a single TableViewRow. I have an orientationchange event listener that resets the width of the label and the height of the row it belongs to to make sure the rows properly display in landscape mode. If the height of the row shrinks (e.g. when the orientation changes from portrait to landscape), the bottom part of the display becomes messed up (see screenshot_landscape_lower.png).
See attachments for screenshots and the code below to reproduce the issue.
var win = Ti.UI.createWindow({
orientationModes : [
Titanium.UI.PORTRAIT,
Titanium.UI.LANDSCAPE_LEFT,
Titanium.UI.LANDSCAPE_RIGHT
]
});
var tableview = Ti.UI.createTableView({
allowsSelection: false,
style: Ti.UI.iPhone.TableViewStyle.GROUPED,
scrollable: true
});
var rows = [];
rows.push(Ti.UI.createTableViewSection({ headerTitle: 'Title 1'}));
/* Multi-line tableviewrow */
var row = Ti.UI.createTableViewRow({
height: 'auto'
});
var label = Ti.UI.createLabel({
height: 'auto',
width: Ti.Platform.displayCaps.platformWidth - 2 * (10+10),
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tristique purus sed magna accumsan id mollis velit ornare. Donec ut magna tempor erat fermentum interdum.',
top: 10,
bottom: 10,
left: 10,
right: 10,
font: { fontSize: 16, fontWeight: 'bold' }
});
row.add(label);
rows.push(row);
/* More single line table view rows */
for (var i = 2; i <= 5; i++) {
rows.push(Ti.UI.createTableViewSection({ headerTitle: 'Title ' + i}));
rows.push({ title: 'Lorem ipsum dolor ' + i});
}
tableview.data = rows;
win.add(tableview);
win.open();
/* Recalculate label width on orientation change */
Ti.Gesture.addEventListener("orientationchange", function(event) {
label.width = Ti.Platform.displayCaps.platformWidth - 2 * (10+10);
row.height = 'auto'; /* Otherwise the row maintains its height */
});
Attachments
File | Date | Size |
---|---|---|
app.js | 2011-07-17T13:15:48.000+0000 | 1283 |
screenshot_landscape_lower.png | 2011-07-17T13:15:48.000+0000 | 130894 |
screenshot_landscape_upper.png | 2011-07-17T13:15:48.000+0000 | 141046 |
screenshot_portrait_lower.png | 2011-07-17T13:15:48.000+0000 | 148579 |
screenshot_portrait_upper.png | 2011-07-17T13:15:48.000+0000 | 147393 |
Closing this ticket as the issue cannot be reproduced with the following environment; iPhone 7 (10.2) MacOS 10.11.6 (15G31) Studio 4.9.0.201705302345 Ti SDK 6.1.1.v20170606103146 Appc NPM 4.2.9 Appc CLI 6.2.1 Ti CLI 5.0.13 Alloy 1.9.11 Arrow 2.0.0 Xcode 8.2 (8C38) Node v4.8.2 Java 1.8.0_131