It should be adjustable whether the text in Text area should start at the top or at the bottom.

[rexrainbow]

It should be adjustable whether the text in Text area should start at the top or at the bottom.

Originally posted by @robinheidrich in https://github.com/rexrainbow/phaser3-rex-notes/discussions/248

[rexrainbow]

@robinheidrich

Two possible solutions to shift text lines down :

1. Add new lines above first line.

2. Set top margin in constructor's config parameter space.text.top

[robinheidrich]

The 2nd method doesn't seem to work, anything above 0 puts the slider at the bottom and no longer shows the text.

The 1st method might work, but would be more of a hacky workaround.

[rexrainbow]

See this demo, line 44-46. It will add a space above first line.

You might get latest version of rexui minifiy file for your project.

[robinheidrich]

But that isn't the way I want it to be. I want the text to start at the bottom instead of the top.

As if you would apply bottom: 0; in CSS.

[rexrainbow]

Don't get it. Could you explain more detail? Might post a css demo or an image.

[robinheidrich]

The text should go from bottom to top, not top to bottom.

Something like this, where the text is aligned at the bottom instead of the top.

[robinheidrich]

I found out that the valign: bottom option in BBCode Text is what I was looking for.

However, this does not work properly in use with Text area. The text is outside the mask and the scroller's thumb is still on top.

I have prepared an example: https://jsfiddle.net/4nyb38hg/

On the left side you can see that the text is under the text area and would not be visible without textMask: false.

On the right side you can see how it should look. It works correctly only if the text is scrollable.

[rexrainbow]

Add scrollLastLineToButtom method, see this demo

[robinheidrich]

That's not quite what I was thinking of. The starting point of the text should be at the bottom instead of the top. So also the thumb of the slider should be at the bottom by default (and always be there).

But in the meantime I decided to just let the text start normally from the top. So from my side there is no need for this addition anymore, but maybe it would be helpful for others.

Thanks for the efforts anyway!

Edit: However, it would be helpful to determine the default alignment of the slider thumb. I would like to have it always at the bottom until the text becomes scrollable (where I can then use scrollToBottom).

Maybe scrollToBottom could align the slider thumb at the bottom even if the text is not scrollable?

[rexrainbow]

It might be inconsistent that text starts at bottom.

• When content is less then one page, align last line to bottom
• Else (content is equal or larger then one pager), align first line to top.

Moreover, from this example post before. The text element is span, not textarea. After searching, I did not find easy way to align text at bottom on textarea element. Text always starts at top.

[robinheidrich]

That's right and makes more sense, I now let the text start normally from the top.

Does the function "scrollLastLineToButtom" remain now? If so there is a typo in it, it should be Bottom.

And what about using scrollToBottom to set only the slider thumb to the bottom even if there is no scrollable text?

[rexrainbow]

Ah, typo again.

I will remove scrollLastLineToButtom method BTW.

[rexrainbow]

Add alwaysScrollable parameter

• false : Can't scroll if content is less then 1 page. Default behavior.
• true : Can scroll in all cases

Set alwaysScrollable to true, to scroll last line to bottom in any case. Demo

[robinheidrich]

I didn't want it to always be scrollable, I just wanted the slider thumb at the bottom even if it wasn't scrollable. This is sadly not quite the behavior I need.

Could you adjust that again? I just want to be able to use scrollToBottom, even if it is not scrollable. The text should not change in any way, only the slider should be aligned at the bottom.

[rexrainbow]

We both agree that starting of content is aligning first line to top of window. The issue is, should last line end at bottom of window? Basically, content less then a page won't be scrollable. the last line might not align at bottom of window.

Then I scrollLastLineToBottom() method at previous version, but did not changing scrolling length. Once scrollLastLineToBottom() method called, it will scroll above first line, to pull down content. i.e. the scrolling is out of range.

To solve this issue, I try to changing scrolling length. If content is less then a page, it can scroll down until last line is at bottom (alwaysScrollable property). Thus scrollLastLineToBottom() can be replaced by scrollToBottom().

[robinheidrich]

I just want the slider thumb aligned at the bottom by default. The text should not be affected in any way.

I don't know to what extent that would be possible, if it is not possible it would be nothing bad, I'm just trying to recreate a UI and there the scroll thumb is at the bottom by default.

[rexrainbow]

Thumb at bottom means t=1, on the other word, content is scrolled to bottom. Since the content still align at top (t=0), the logic will be broken, or it can't cover this case.

[robinheidrich]

I see. I think this issue can be closed. Thanks for your effort!