UI error in Titanium Alloy Screen when no top margin is defined

Hi I am a newbie to Titanium App, and learning the Alloy Method for developing.

I wrote in index.xml:

<Alloy>
    <Window class="container">
        <TextField id="title" hintText="Title"></TextField>
        <TextArea id="description" hintText="Description"></TextArea>
    </Window>
</Alloy>

But when previewed in Android Emulator, it is showing overlapped textfields onto the center of the screen. But It by default, it should start from top and then should automatically take some margin from top relatively.

Right now what it is showing is: i.imgur.com/KOZUP6K.png

You have to override the default alignment of the Window children by giving the layout property a value like vertical or horizontal, check this link for more explanation.

You can also give the text fields the same class and give that class a top value, try it and check the result in the UI.

index.xml:

<Alloy>
    <Window class="container" layout="vertical">
        <TextField hintText="TextField 1" class="inputs" />
        <TextArea hintText="TextArea 1" class="inputs" />
        <TextField hintText="TextField 2" class="inputs" />
        <TextArea hintText="TextArea 2" class="inputs" />
    </Window>
</Alloy>

index.tss:

".inputs": {
    top: 10
}