[TIMOB-3238] Android: UI - A problem with dimensions defined as percentage in nested views

GitHub Issue	n/a
Type	Bug
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2012-01-10T11:49:07.000+0000
Affected Version/s	Release 1.6.0
Fix Version/s	Release 1.8.0.1
Components	Android
Labels	module_views, qe-testadded
Reporter	Ivan Skugor
Assignee	Marshall Culpepper
Created	2011-04-15T03:40:09.000+0000
Updated	2013-11-07T05:46:28.000+0000

Description

I'm using latest Titanium mobile (1.6.1) and Android emulator (Galaxy Tab addon 2.2). I have problem with dimensions defined as percentage when I put view in another view. Here is test case:

  var win = Ti.UI.createWindow({
  layout: 'vertical', 
  fullscreen: true, 
  height : Ti.Platform.displayCaps.platformHeight,
  width : Ti.Platform.displayCaps.platformWidth
});

var view = Ti.UI.createView({
  layout: 'horizontal',
  height: 50,
  backgroundColor: '#ccf',
  width: '50%'
});
var nested_view = Ti.UI.createView({
  height: 50,
  backgroundColor: '#cfc',
  width: '50%'
});

view.add(nested_view);
win.add(view);
win.open();

Second view, "nested_view", doesn't show at all, but I think it should and it should have half of "view" width.

Attachments

File	Date	Size
screenshot_458.png	2011-12-21T02:53:04.000+0000	8641

Comments

Ivan Skugor 2011-04-15

Same problem applies to TableView. I haven't checked for other "views".
tonylukasavage1 2011-04-15
I'm also having the same problem as Ivan. With the following code I am unable to see the viewInputs view. This is the case even is viewInputs contains other components as well.

var win = Titanium.UI.createWindow();
win.backgroundColor = '#dddddd';
win.layout = 'vertical';

var viewTop = Titanium.UI.createView({
borderRadius:10, backgroundColor:'#ffffff', borderColor:'#000000', borderWidth:2, width:'95%', height:'20%', top:'2.5%', layout:'horizontal' }); win.add(viewTop);

var viewInputs = Titanium.UI.createView({
```
   width:'50%',
   height:'100px',
   backgroundColor:'#ff0000',
   top:5,
   left:5,
   layout:'vertical'
   
```
}); viewTop.add(viewInputs);

win.open();
Joe iEntry 2011-04-15

I am having same issue with Ti Mobile 1.6.1 and Android 1.6 attempting percentage width on a view (just plain view).

Joe iEntry 2011-04-15

Workaround

To calculate percentage dimensions one can:

   var width = Math.round(Ti.Platform.displayCaps.platformWidth*0.9); // 90%
   var height = Math.round(Ti.Platform.displayCaps.platformHeight*0.9); // 90%

Source: http://developer.appcelerator.com/question/116905/subscribed">Appcelerator Q&A

Ivan Skugor 2011-04-15

That works for elements which parent element has "Ti.Platform.displayCaps.platformWidth" width.

In general, parent's width/height can be whatever, percentages are there so you don't need to calculate it manually, they are calculated automatically depending on parent element size.
tonylukasavage1 2011-04-15

Dimensions calculated like Joe iEntry suggests don't get recalculated on orientation change. Dimensions specified with a percentage value do. This is a major problem for me in my current project. I can't get horizontal layouts to work with percentage dimensions (iPad if that matters). Instead I'm using hacks and custom code to do something pretty basic.

What's going on here?
Joe iEntry 2011-04-15

I understand this is not meant for discussion, but Tony, I haven't tested my app with orientation change. This will be a must. Can you post your workaround?
tonylukasavage1 2011-04-15

I don't have code I can post right now, but the idea is to set dimensions like this (similar to how you stated above):

child.width = parent.width * 0.5;

Keep a reference to this child in an array, and then resize it in a Titanium.Gesture.orientationchange event handler. It sucks, but it works.
Ivan Skugor 2011-12-20

This has been fixed a long time ago so it can be closed. Also, it wrongly states it's iOS issue.
Paul Dowsett 2011-12-21

Reporter has indicated that this issue is fixed. The included test case proves this, using 1.8.0.1 RC3 + v8. See the attached screenshot. Please close
Marshall Culpepper 2011-12-21

This was noted as fixed by Paul
Michael Pettiford 2012-01-10

Closing issue Tested with Ti Studio 1.0.8.201201091758 Ti Mob SDK 1.8.0.1 OSX Lion Nexus One 2.2.2 v8 and rhino Verified expected behavior as per the test app.js and attached screentshot
Dustin Hyde 2012-01-10

Added Label: qe-testadded.
Shameer Jan 2013-11-07

Anvil testcase PR https://github.com/appcelerator/titanium_mobile/pull/4887

JSON Source