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

Question

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

score 0 · Answer 1 · answered Apr 12 '15 at 12:18

0

By default Alloy applies absolute layout to the child components of View / Window. To overcome this just specify a vertical layout like this:

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

answered Apr 12 '15 at 12:18

WeMakeSoftware

9,039
5
34
52

Thanks for your answer Funtik, but the layouts are centered and also the cursor is not blinking when in focus. http://i.imgur.com/4ZBW2Hl.png – Molly Apr 12 '15 at 13:39

score 0 · Accepted Answer · answered Apr 12 '15 at 13:27

0

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
}

answered Apr 12 '15 at 13:27

Zabady

301
1
3
14

Thanks for your answer Zabady. Can you please also tell why cursor is not blinking when in focus, and by default text color is grey. Or any method to change both of them http://i.imgur.com/Ur3azeF.png – Molly Apr 12 '15 at 13:46
2. when focus default blue is already good. But When not in focus, can we add the blue underline color to black or something? – Molly Apr 12 '15 at 13:53
If you want me to download any Theme, then I did it as well. Here is the error I am getting then while compiling http://stackoverflow.com/questions/29591310/failed-to-package-application-when-android-menifest-portion-is-changed-to – Molly Apr 12 '15 at 16:03
The default color on android is gray and on iOS is black, you can edit it by adding color in the tss file after `top: 10,`, remember to add a comma after each property, add this line --> `color: 'black'`, it also takes hex colors. – Zabady Apr 13 '15 at 13:35
on iOS you can edit the style of the textfield, by giving value to property borderStyle, ex. `borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,` and on android, you can edit `borderWidth` and `borderRadius` properties with numbers to achieve what you want, I recommend that you read the documentation of whatever UI element you're using, check this for the case of Text Fields --> http://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.UI.TextField-property-borderStyle – Zabady Apr 13 '15 at 13:48

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

2 Answers2