Vertically Center Text and Still Be Scrollable

Question

Vertically Center Text and Still Be Scrollable

You must Login before you can answer or comment on any questions.

I have a label and I want the text to be centered vertically. This is accomplished by setting an explicit height on the label. Cool.

But when this label gets more and more text, I want it to scroll once it gets enough text. Here's an image of what I mean:

![alt text](http://labrum.co/bucket/scrolling.jpg "Scrolling Demo")

But it appears that setting the height on the label to get the vertical alignment means it won't scroll inside a scrollView that it's attached to. The scrollView only works if the label's height is set to Ti.UI.SIZE (i.e. 'auto').

Is there any way to have both centered vertical alignment and scrolling?

Ti Mobile SDK 2.1.1

1 Answer

Your Answer

Think you can help? Login to answer this question!

Crud, that image didn't work. You can see it here.

— commented 10 months ago by Clifton Labrum

Accepted Answer

Accepted Answer

Hi Clifton

This should do it - I have tested it - so as long as what you said went in the left ear and stayed - this is good.

var scrollView = Ti.UI.createScrollView({
    borderColor: '#444',
    borderSize: 2,
    borderRadius: 10,
    contentHeight: 'auto',
    contentWidth: 'auto',
    height: 100,
    layout: 'vertical',
    left: 20,
    right: 20,
    showHorizontalScrollIndicator: true,
    showVerticalScrollIndicator: true,
    width: Ti.UI.FILL
});
win.add(scrollView);
var lblChild = Ti.UI.createLabel({
    bottom: 10,
    height: Ti.UI.SIZE,
    left: 10,
    right: 10,
    text: 'This is some really long text that should sit in the middle and then scroll. This is some really long text that should sit in the middle and then scroll.',
    top: 10,
    width: Ti.UI.FILL
});
scrollView.add(lblChild);

You would use this scrollView as the parent and then lblChild as the label. You can tweak the 'margins' to suit your needs of course.

Obviously adding as many sets as you need.