Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-5185] Resizing label on orientationchange messes up bottom of page

GitHub Issuen/a
TypeBug
PriorityLow
StatusClosed
ResolutionCannot Reproduce
Resolution Date2017-06-07T17:58:20.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsiOS
Labelsn/a
ReporterJeroen van Vianen
AssigneeIngo Muschenetz
Created2011-07-17T13:15:48.000+0000
Updated2017-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

FileDateSize
app.js2011-07-17T13:15:48.000+00001283
screenshot_landscape_lower.png2011-07-17T13:15:48.000+0000130894
screenshot_landscape_upper.png2011-07-17T13:15:48.000+0000141046
screenshot_portrait_lower.png2011-07-17T13:15:48.000+0000148579
screenshot_portrait_upper.png2011-07-17T13:15:48.000+0000147393

Comments

  1. Lee Morris 2017-06-07

    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

JSON Source