Issue with label alignment in titanium alloy

Question

I have created custom check boxes in my application. I have no issue with check box and it's label if the label text is small. If the label text is large (more than a one line) the alignment is not showing properly.

enter image description here

Look at the above screenshot: the first option label text is "Please select the 2 primary reasons rating the program testing the program" and second option label text is "Question2". If the text in first label is small that is which fits in one line then the UI looks good. But If text is more than one line I am facing the above issue.

My code is as follows,

View:

<Label class="standardType1">Please select the 2 primary reasons rating the program?</Label>

<View class="checkBoxContainerView">
    <Widget id="box1" src="checkbox" value="true"/>
    <Label class="question1">Please select the 2 primary reasons rating the program testing the program</Label>
</View>

<View class="checkBoxContainerView">
    <Widget id="box2" src="checkbox" value="true"/>
    <Label class="question1">Question2</Label>
</View>

Style:

"#box1":
{
    height: Ti.UI.SIZE,
    width: Ti.UI.SIZE,
    left:10
}

"#box2":
{
    height: Ti.UI.SIZE,
    width: Ti.UI.SIZE,
    left:10
}

".question1":
{
    top: 3,
    left: 13,
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    color: '#fff',
    font:{
        fontSize: 16, 
        fontWeight: 'normal'
    }
}

".checkBoxContainerView":
{
    left: 15,
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    layout: 'horizontal'
}

Can any one help me with that? Even if label text is more than one line the height of the view should automatically increase and option should be view. Please help me.

i dont have the system to test right now but i think you should set width: Ti.UI.FILL for .checkBoxContainerView — turtle
Thank you, Now the full label text is showing. But the label text is starting from next line. That is label is showing below the check box. I need label should start in same line where check box is showing. Any suggestios please — Vinod
Maybe you can set the height of the checkBoxConterView to 'auto'? — Robin Ellerkmann
@Robin Ellerkmann I tried to the height to 'auto'. It is not working as I expected can you please suggest another workaround — Vinod
Although it seems a bit odd: You can try to remove the height attributes of your labels. This should force Titanium to scale the height automatically. — Robin Ellerkmann

Robin Ellerkmann Robin Ellerkmann · Accepted Answer · 2014-10-22T11:00:31

After thinking a lot about your problem I experimented a little bit. I did not use the checkBox but tried to receive a proper alignment if the label is a multi-line label.

Xml:

<View id="temp" layout="horizontal" top="0" left="0">
    <Label id="headline"/>
    <Label id="description"/>
</View>

And my .tss:

"#headline": {
    top: "0",
    left: "0",
    width: "50%",
    text: "Headline",
    font: {
        fontSize: 20
    }
}
"#description": {
    left: "0",
    width: "50%",
    text: "Your long text here",
    font: {
        fontSize: 16
    }
}

As you can see I did not specify any height or width for my container (not defined in the .tss but in the xml) and only set a width parameter for my labels. You should consider to use 10-20% for your checkBoxes and the rest for your label. Do not specify any height parameters since the system will do this automatically.

Issue with label alignment in titanium alloy

1 Answers