CODEWITHSUNDEEP
viewtitanium
ntan
ntan

Reputation: 2205

titanium view height and contents

I am new to Titanium and try to understand the how the views works and i am facing a problem.

I have create a view that contains one image and 2 labels.

var row = Titanium.UI.createTableViewRow({height:'auto'});


            var item_view = Titanium.UI.createView({
                height:'100%', 
                layout:'vertical',
                top:5,
                right:5,
                bottom:5,
                left:5
            });

            var item_image = Titanium.UI.createImageView({
                url:imageUrl, // the image for the image view
                top:0,
                left:0,
                height:97,
                width:65
            });
            item_view.add(item_image);

            var productName_lbl = Titanium.UI.createLabel({
                text:productName,
                left:70,
                width:'auto',
                top:-97,
                bottom:2,
                height:'auto',
                textAlign:'left',
                color:'#444444',
                font:{fontFamily:'Trebuchet MS',fontSize:12,fontWeight:'bold'}
            });
            item_view.add(productName_lbl);


            var comName_lbl = Titanium.UI.createLabel({
                text:comName,
                left:70,
                width:'auto',
                top:7,
                bottom:2,
                height:'auto',
                textAlign:'left',
                color:'#444444',
                font:{fontFamily:'Trebuchet MS',fontSize:12,fontWeight:'bold'}
            });
            item_view.add(comName_lbl);

The problem is that the image has height 97px but both labels on left have smaller height.

The result is the image is now showing 100% but only show according the height of labels on left. keep in mind that labels maybe really long texts so i have on labels width,height auto

i tried to change the row height from auto to 100% but still not working.

Any help appreciated

Upvotes: 0

Views: 7657

Answers (3)

JasonK
JasonK

Reputation: 21

I was having problems with View elements filling out to be the height of the screen (as opposed to the height of the elements it contains) and after reading the layout changes link from JC Guerrero (thanks JC!), I Added: 

Ti.UI.createView(height: Ti.UI.SIZE, ...

and it successfully auto-adjusted the view's height to match it's contents

[edit] Removed quotation mark, and it works well, thanks!

Upvotes: 1

percebus
percebus

Reputation: 847

Try Titanium 2.0. It solves lots of these types of rendering issues.

You can read about it on their wiki Titanium 2.0 Layout Changes

Upvotes: 3

Paul Annekov
Paul Annekov

Reputation: 3263

Titanium calculate elements height badly, if you use 'vertical' layout. So you must set their height's by yourself, or remove layout property for 'absolute' positioning.

Upvotes: 0

Related Questions