Issue with label alignment in titanium alloy

问题

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.

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.

回答1:

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.

来源：https://stackoverflow.com/questions/26489145/issue-with-label-alignment-in-titanium-alloy