Titanium.UI.TableView row height problem

You must Login before you can answer or comment on any questions.

I have the following code:

var win = Titanium.UI.currentWindow;
 
var tableRow = Titanium.UI.createTableViewRow({
 
});
var textArea = Titanium.UI.createTextArea({
    value: '   ' + win.content,
    font: {fontSize: 12},
    editable: false,
});
tableRow.add(textArea);
 
var contentTable = Titanium.UI.createTableView({
    style: Titanium.UI.iPhone.TableViewStyle.GROUPED,
    headerTitle: win.contentTitle,
    data: [tableRow]
});
 
win.add(contentTable);
I tried to add the height: auto property to it and make the tablerow dynamic, but I have ran into problems with that. My goal is to use the GROUPED tableview view to display a short paragraph, with the article title as the header.

Edit:

Using the following code, I get the result shown of the Screenshot below. The right side isn't displaying as I had hoped

var textLabel = Titanium.UI.createLabel({
    text: '   ' + win.content,
    font: {fontSize: 12},
    height: 'auto',
    width: 'auto',
    left: 8,
    top: 4,
    right: 8,
    bottom: 4
});
![iphone screenshot](http://www.idkz.org/67c78d9a6980fac6217f7c488de0418b "iPhone")

12 Answers

Hi Ryan,

yes you can, using the left:, top: and bottom: options, here is the code again.

var textLabel = Titanium.UI.createLabel({
    text: '   ' + win.content,
    font: {fontSize: 12},
    height:'auto',
    width:'auto',
    left:10,
    top:5,
    bottom:5
});
tableRow.add(textLabel);

you could try using the Label object instead of a text area, or do you want the content to be editable?

I did try the Label at one point, but it didn't seem to make a difference. One thought I had was that the label was possibily one line of text only

Hi with Label you can have multiple lines as well, you just need to add the height:auto option. Here is your code using Label instead of Text Area.

var textLabel = Titanium.UI.createLabel({
    text: '   ' + win.content,
    font: {fontSize: 12},
    height:'auto',
    width:'auto'
});
tableRow.add(textLabel);
Hope it helped, Antonio

Antonio, that code helped me a ton, however, how can I add left/right padding? Right now the content goes over the left/right edges of the table cell, its even pretty close on the top/bottom too.

Also, using the code from Antonio, the label does eventually get cutoff :(

Hi Ryan,

you are right, in some occasions I do have the same issue you are facing with the Text going over and out if the Label, still didn't find a solution.

Let me know if you find something.

Antonio

Hi Ryan,

I finally fixed this issue of the content going over the View, I changed the width parameter with a fixed size instead of 'auto'.

It worked for me.

But then when your app goes to landscape is that going to cause issues, I used that workaround too. however landscape looks just silly.

I think there is mention of mobile SDK 1.3.2 having 'auto' size issue somewhere...

Your Answer

Think you can help? Login to answer this question!