Titanium controller has a height I can't seem to control

Question

I created a controller for a button I want to reuse in my Titanium application. I use the createController in one of my windows and add it to the window. So far so good.

However, the button seems to be having a full window worth of height, and I can't find a way to change this. What am I missing? Below my files:

view button.xml:

<Alloy>
    <View id="generalButtonContainer">
        <View id="generalButton" class="generalButton" onClick="callback" >
            <Label class="generalButtonLabel" id="generalButtonLabel" />
            <ImageView class="generalButtonIcon" />
        </View>
    </View>
</Alloy>

button.tss:

".generalButton": {
    height: 60,
    borderRadius: 2,
    backgroundColor: '#5ba7e6',
    left: 10,
    right: 10
}

".generalButtonLabel": {
    color: '#ffffff',
    font: {
        fontSize: 16
    },
    left: 15
}


".generalButtonIcon": {
    image: '/images/generic/arrow-thin-right-white.png',
    height: 15,
    width: 15,
    top: 22,
    right: 15
}
"#generalButtonContainer": {
    width: 320,
    height: Ti.UI.SIZE
}

And here I include it in my parent window

Alloy.createController('button',{text: 'signup.button.continue'});
$.signupButtonContainer.add(buttonView.getView());

And now, even though I specify a height, (also in the parent window on signupButtonContainer : Ti.UI.SIZE) I still get a full window height view.

How do I fix this problem?

edit: in case there is any info you're missing, just ask! Complicated question with lots of information

Answer 1

I don't see anything obvious. Debugging these layout issues can involve some trial and error. I'd suggest two tactics.

1) Check the generated code in Resources/platform/alloy/controllers/controller.js to see if there's something obvious there. Keep in mind the default heights/widths for the various layout components for those components you see without explicit values.

2) I would suggest you use LiveView or TiShadow so that you can see layout changes quickly. Then, start setting background colors of the various elements to obvious colors (strings like pink, orange, green, etc. work well) to see which is filling the screen.