Search code examples
javascriptandroidappcelerator-mobile

How do I fix how my Titanium Developer app Label is rendering on a TableView?


I am having trouble getting the following code to render as I expect it to:

var img = Titanium.UI.createImageView({
  top: 0,
  left: 0,
  width: 140,
  height: 92,
  image: 'http://cdn.monmotors.com/tn_' + imgr,
  defaultImage: 'car.png'
});

post_view.add(img);

var lbl = Titanium.UI.createLabel({
  text: desc,
  left: 160,
  width: 'auto',
  top: 0,
  height: 92,
  textAlign: 'left',
  color: '#ffffff',
  font: {
    fontSize: 12,
    fontWeight: 'bold'
  },
});

post_view.add(lbl);

This is how it is rendering:

Android Screenshot

I've set top: 0 and I assumed this would put the label at the top, but this is obviously not the case.

Anyone have any idea how I can achieve this? Thanks in advance.


Solution

  • If all the images are the same height, you can set top to a negative value (perhaps -92 if your height for the image is set to 92). However, if the image sizes vary, you will likely need to vary the value appropriately.

    Ideally, setting layout: horizontal in a view you use to wrap the label and the image together would make it so that top: 0 would work for you, but it appears that horizontal may not be supported (yet, at least) for Android in Appcelerator. That info is 9 months old, this link from three weeks ago says that it's now supported, so it's probably worth giving it a shot.