Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-7836] Android: View - height:'auto' causing view to be placed at the top of its parent rather than centering in the parent

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2012-05-02T12:50:23.000+0000
Affected Version/sRelease 1.8.1, Release 1.8.2
Fix Version/sRelease 2.0.0, Sprint 2012-06
ComponentsAndroid
Labelsmodule_view, parity, qe-testadded
ReporterJon Alter
AssigneeAllen Yeung
Created2012-02-28T08:12:01.000+0000
Updated2012-05-02T12:50:23.000+0000

Description

Setting the height of a view to 'auto' causes the view to be displayed at the top of parent as if you had set 'view.top = 0;'. When the height of the view is set to something constant, it is displayed at the center of the parent view as it should be.

Steps to reproduce:

Step 1: run the code below Step 2: notice the the red view is at the top of the window (it should be centered vertically) Step 3: in sectionView change "height: 'auto'" to "height: 50" Step 4: run the app again Step 5: notice that the view is centered vertically in the window
var win = Ti.UI.createWindow({backgroundColor:'white'});
win.open();

var section = createSectionView('TEST');
win.add(section);

function createSectionView(text){
	// using 'auto' here causes the view to be displayed at the top instead of
	// being centered in the parent
	var sectionView = Ti.UI.createView({
		height: 'auto',
		// height: 50,
		layout: 'vertical',
	});
	// using 'auto' here causes clickView to not be displayed
	var sectionHeader = Ti.UI.createView({
		height: 'auto',
		// height: 30,
		backgroundColor:'red',
	});
	var sectionHeaderLabel = Ti.UI.createLabel({
		text: text,
		height: 'auto',
		top: 2,
		bottom: 3,
		left: 10,
		right: 10,
		color: '#FFF',
	});
	var clickView = Ti.UI.createView({
		backgroundColor: 'green',
		opacity: 0.5,
	});
	
	sectionView.add(sectionHeader);
	sectionHeader.add(sectionHeaderLabel);
	sectionHeader.add(clickView);
	
	return sectionView;
};

Comments

  1. Allen Yeung 2012-03-13

    The behavior for this has changed as a result of the new composite layout spec: https://wiki.appcelerator.org/display/guides2/UI+Composite+Layout+Behavior+Spec With the new layout spec you can achieve something similar by the following:
       var win = Ti.UI.createWindow({backgroundColor:'white'});
       win.open();
       
       var section = createSectionView('TEST');
       win.add(section);
       
       function createSectionView(text){
       	// using 'auto' here causes the view to be displayed at the top instead of
       	// being centered in the parent
       	var sectionView = Ti.UI.createView({
       		top: '50%',
       		height: 'auto',
       		// height: 50,
       		layout: 'vertical',
       	});
       	// using 'auto' here causes clickView to not be displayed
       	var sectionHeader = Ti.UI.createView({
       		height: Ti.UI.SIZE,
       		// height: 30,
       		backgroundColor:'red',
       	});
       	var sectionHeaderLabel = Ti.UI.createLabel({
       		text: text,
       		height: 'auto',
       		top: 2,
       		bottom: 3,
       		left: 10,
       		right: 10,
       		color: '#FFF',
       	});
       	var clickView = Ti.UI.createView({
       		backgroundColor: 'green',
       		height: Ti.UI.SIZE,
       		opacity: 0.5,
       	});
       	
       	sectionView.add(sectionHeader);
       	// sectionHeader.add(sectionHeaderLabel);
       	clickView.add(sectionHeaderLabel);
       	sectionHeader.add(clickView);
       	
       	return sectionView;
       };
       
  2. Allen Yeung 2012-03-13

    PR to achieve parity with iOS ready here: https://github.com/appcelerator/titanium_mobile/pull/1659
  3. Ivan Skugor 2012-03-14

    Could that Wiki page be publicly available? I'm getting this message: Page Not Found The page you were trying to reach could not be found. This could be because: The page does not exist. The page exists, but you do not have permission to view it.
  4. Allen Yeung 2012-03-14

    That wiki link should be public once we release 2.0
  5. Ivan Skugor 2012-03-14

    OK, thanks.
  6. Wilson Luu 2012-03-16

    Closing bug. Verified fix on: SDK build: 2.0.0.v20120316171745 Runtime: v8, rhino Titanium Studio, build: 2.0.0.201203152033 Device: Nexus S (2.3.6)
  7. Wilson Luu 2012-03-19

    Reopening to edit comment.
  8. Natalie Huynh 2012-05-02

    Open to update label

JSON Source