Search code examples
titaniumtitanium-mobile

Titanium.UI.TextArea for text display: Content positioning to start reading text from beginning

I am building a tabbed mobile application in Appcellerator Titanium.
I need to fill one tab with a big text-segment, and are using a TextArea to do this:

var explanationView = Ti.UI.createTextArea({
    enabled: false, 
    editable: false, 
    color: 'black', 
    value: explanation
});

This displays the text as I want. However when the content gets too long to fit it shows the latter part of the content, forcing the user to scroll upwards to find the beginning of the text.

  What I get:       What I want:
  __________       ______________
 | CONTENT  |      ||          ||
_|__________|_     ||   VIEW   ||
||          ||     ||__________||
||  VIEW    ||      |  Content |
||__________||      |__________|

I guess my question is twofold:

  • Is there a way to force the TextArea to scroll to the top when generated?
  • Is there a better way using titanium to accomplish an uneditable textView?

- Update with solution -

Martin is absolutely right, the best way to make a non-editable text for display is to use Ti.UI.Label. A working solution in my case were to replace the above code with the following:

var explanationView = Titanium.UI.createScrollView()
explanationView.add(Ti.UI.createLabel({text: explanation, color:'black'}))

win.add(explanationView)
Solution

  • Better way to represent a TextArea that isn't editable would be a label. This should expand to multiple lines if needed. It would also be less likely to confuse the user into thinking the box is something you can edit like a normal textarea entry.

    Not really sure what the pictures are trying to communicate. Initially it looks like to me you are adding the view and the textarea to the overall view in the wrong order or have their top/bottom position set wrong.

    If you are attempting to show scrollable text and a view with some other content on it at the same time, I would probably create a Scrollable View and put my text on that with the appropriate height set and then have the other view fill the rest of the screen.

    Whenever I created a large amount of text or items on the screen, my view hasn't already been scrolled to the bottom. If I don't destroy and recreate my win/view after scrolling down on it myself, then I might see this. Especially if I attempt to reuse the items already displayed on the screen and just reload them with data.