multiple labels in multiline

Hey guys, I'm using inside a table row, multiple labels, one next to the other, only two to be more precise, however, when the second label is bigger than the rest of the width, it breaks to the line below where the second label start, instead of the initial left position where the first label begins, if I put a third label, then it would start correctly, but not before, below is a screenshot of what is happening.

If the second label was too big, I wanted that the second label continued on the next line right below the first label.

multiline label

My code:

var rowView = Ti.UI.createView({
            width:'auto',
            height:35,
            top:5,
            left:60,
            layout:'horizontal'
 
        })
        var rowName = Ti.UI.createLabel({           
            width:'auto',
            top:0,
            left:0,
            text:response.close.users[i].name+" is shouting ",
            color:'#94A1AF',
            font:{fontSize:14,fontWeight:'normal'}
        });
        var rowShout = Ti.UI.createLabel({
            width:'auto',
            top:0,
            left:0,
            text:'"'+response.close.users[i].shout+'".',
            color:'#94A1AF',
            font:{fontSize:14,fontWeight:'bold'}
        });
 
        rowView.add(rowName);
        rowView.add(rowShout);
        row.add(rowView);

Hello Von,

use the static width for the label and set label height 30 so it will automatic continues at next line if more data is there.

Hi

If you want two labels side by side in a single row and the height of the row dependant on the tallest label, then try amending your code as below. This code assumes they both occupy half of the width as in your picture.

I am also going to assume that your rowView is being added to an actual tableViewRow.

var rowView = Ti.UI.createView({
  width:Ti.UI.FILL,
  height:Ti.UI.SIZE,
  top:5,
  bottom:5,
  left:60,
  right:60,
  layout:'horizontal'
})
var rowName = Ti.UI.createLabel({           
  width:'45%',
  height:Ti.UI.SIZE,
  top:0,
  left:0,
  text:response.close.users[i].name+" is shouting ",
  color:'#94A1AF',
  font:{fontSize:14,fontWeight:'normal'}
});
var rowShout = Ti.UI.createLabel({
  width:'45%',
  height:Ti.UI.SIZE,
  top:0,
  left:'5%',
  text:'"'+response.close.users[i].shout+'".',
  color:'#94A1AF',
  font:{fontSize:14,fontWeight:'bold'}
});
 
rowView.add(rowName);
rowView.add(rowShout);
row.add(rowView);

You can obviously change the internal sizing to suit your needs but this will create a parent view that takes up the width of the parent row - with some margin, the adds two labels, each taking up 45%, and the second having a 5% gutter (which you could make 10% of course). The labels will be top aligned inside the view.

See how that works for you.