[TIMOB-4741] iOS: Percentage-based views need to be re-drawn on device rotation

GitHub Issue	n/a
Type	Bug
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2012-01-10T16:10:16.000+0000
Affected Version/s	Release 1.7.1
Fix Version/s	Sprint 2011-43, Release 1.7.4, Release 1.8.0
Components	iOS
Labels	module_views, qe-testadded
Reporter	Matthew Congrove
Assignee	Blain Hamon
Created	2011-07-21T10:32:04.000+0000
Updated	2012-01-10T16:10:16.000+0000

Description

Views that have widths or positioning points based on percentages (e.g. "width: 20%" or "left: 20%") do not properly get updated on device rotation. Demonstration video: http://screencast.com/t/OmNKkLNHlW As you can see, switching away from the tab and back to it properly renders the views.

var tabGroup = Titanium.UI.createTabGroup();
var win1 = Titanium.UI.createWindow({ title: 'Tab 1', backgroundColor: '#fff' });
var tab1 = Titanium.UI.createTab({ icon: 'KS_nav_views.png', title: 'Tab 1', window: win1 });

var v1 = Ti.UI.createView({
	backgroundColor: '#f00',
	width: '20%',
	left: '30%',
	top: 0,
	height: '100%'
});

var v2 = Ti.UI.createView({
	backgroundColor: '#0f0',
	width: '20%',
	right: '30%',
	top: 0,
	height: '100%'
});

win1.add(v1);
win1.add(v2);
var win2 = Titanium.UI.createWindow({ title: 'Tab 2', backgroundColor: '#fff' });
var tab2 = Titanium.UI.createTab({ icon: 'KS_nav_ui.png', title: 'Tab 2', window: win2 });
var label2 = Titanium.UI.createLabel({ color: '#999', text: 'I am Window 2', font: { fontSize: 20, fontFamily: 'Helvetica Neue' }, textAlign: 'center', width: 'auto' });
win2.add(label2);
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);
tabGroup.open();

Comments

Reggie Seagraves 2011-07-27

This will probably be affected by the composite layout work.
Stephen Tramer 2011-07-27

Going to assume this will be part of the composite reimplementation. We need to create a parallel bug for Android.
Blain Hamon 2011-10-21

There is a bug in the sample code here in that no window orientations are provided. The android version of the bug has the proper bit of code, in that orientationmodes MUST be defined either on the tabgroup or the window itself.
Blain Hamon 2011-10-24

Update on my previous comment: As of TIMOB-5331 & TIMOB-5332 my comment no longer applies. That is, orientationModes no longer MUST be defined on tabgroup or window. (See pull requests https://github.com/appcelerator/titanium_mobile/pull/576 and https://github.com/appcelerator/titanium_mobile/pull/577 for 1.7 and 1.8, respectively)

Natalie Huynh 2011-10-24

   var tabGroup = Titanium.UI.createTabGroup();
   var win1 = Titanium.UI.createWindow({ title: 'Tab 1', backgroundColor: '#fff', fullscreen: 'false' });
   var tab1 = Titanium.UI.createTab({ icon: 'KS_nav_views.png', title: 'Tab 1', window: win1 });
   
   win1.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT, Ti.UI.UPSIDE_PORTRAIT];
   
   var v1 = Ti.UI.createView({
   	backgroundColor: '#f00',
   	width: '30%',
   	left: '20%',
   	top: 0,
   	height: '100%'
   });
   
   var v3 = Ti.UI.createView({
   	backgroundColor: 'blue',
   	width: '80%',
   	left: '10%',
   	top: '10%',
   	height: '80%'
   });
   
   var v5 = Ti.UI.createView({
   	backgroundColor: 'gray',
   	width: '60%',
   	left: '20%',
   	top: '10%',
   	height: '80%'
   });
   
   v3.add(v5);
   v1.add(v3);
   win1.add(v1);
   
   var v2 = Ti.UI.createView({
   	backgroundColor: '#0f0',
   	width: '30%',
   	right: '20%',
   	top: 0,
   	height: '100%'
   });
   
   var v4 = Ti.UI.createView({
   	backgroundColor: 'blue',
   	width: '80%',
   	left: '10%',
   	top: '10%',
   	height: '80%'
   });
   
   var v6 = Ti.UI.createView({
   	backgroundColor: 'gray',
   	width: '60%',
   	left: '20%',
   	top: '10%',
   	height: '80%'
   });
   
   v4.add(v6);
   v2.add(v4);
   win1.add(v2);
   
   var win2 = Titanium.UI.createWindow({ title: 'Tab 2', backgroundColor: '#fff', fullscreen: 'false' });
   win2.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT, Ti.UI.UPSIDE_PORTRAIT];
   var tab2 = Titanium.UI.createTab({ icon: 'KS_nav_ui.png', title: 'Tab 2', window: win2 });
   var label2 = Titanium.UI.createLabel({ color: '#999', text: 'I am Window 2', font: { fontSize: 20, fontFamily: 'Helvetica Neue' }, textAlign: 'center', width: 'auto' });
   win2.add(label2);
   tabGroup.addTab(tab1);
   tabGroup.addTab(tab2);
   tabGroup.open();

Compile the above code and Run 1. Launch the Test 2. Rotate the Device 3. Click on Tab 2 4. Rotate the Device Actual: The percentage-base views are not redrawn correctly Expected: Should redraw correctly after rotations

Wilson Luu 2011-12-07

Closing bug. Verified fix on: OS: Mac OS X Lion Titanium Studio, build: 1.0.7.201112061404 SDK build: 1.8.0.1.v20111207151125 Device: iphone 4S Sprint (5.0.1)
Natalie Huynh 2012-01-04

Open to update label

JSON Source