dynamic row height with image
Hey all!
I created a table view with variable height, using, layout:'vertical' for the table row, and height:'auto' on each label (Credit: James K's explanation ). Now I run into a problem of adding a thumb nail (like the kitchen sink app has).
When I add the image, it messes up the auto formatting of the labels, and pushes them around. I've tried every combination of "auto" I could, and tried removing formatting all together, and nothing seems to work.
Here are images. The first shows the articles correctly displaying. The second happens when I add an image.
Here's my code snip:
//add row with section title
var row = Ti.UI.createTableViewRow({
layout:'vertical',
height:'auto',
header:sectiontitle});
var img = Ti.UI.createImageView({
url:thumb,
top:5,
bottom:5,
height:60,//tried auto
width:60,//tried auto
left:5
});
row.add(img);
var rowtitle = Ti.UI.createLabel({
text:itemtitle,
left:72,
top:5,
height:'auto',
right:5
});
row.add(rowtitle);
var rowsummary = Ti.UI.createLabel({
text:summary,
left:72,
top:5,
bottom:5,
height:'auto',
right:5
});
row.add(rowsummary);
Thanks for any help!
2 Answers
-
Accepted Answer
The problem is that you've specified a vertical layout for the entire row but you're trying to include horizontal layout elements as well!
The solution is to create a separate view to hold your row labels, and only set
layout:vertical
on that view. Then align this view next to your row image.See
vertical_layout_table_view.js
for an example. -
try to use minus values for the rowtitle object's top-property, the problem is that the rowtitle's top-property is related to the image-object when using the vertical layout mode