Automatic scroll down to bottom of TextArea (or other component)

Vaadin 6 / 7 / 8 Framework UI
1

Hi,

I’m creating a screen with an large outputArea where the log results of a separate batch job are shown (kind of a tail functionality where the last lines are shown, however all previous lines should be also accessible by scrolling up.
So the batch job logs all kinds of information and the screen will show every new line in the outputArea.

I used to have a ListSelect component where I could easily do a listSelect.select(<>) which forced the component to automatically scroll down to the last line.
However the drawback here was that a user was not able to select one line and do a copy/paste to paste the information in an TextEditor for example.

So I swichted to a TextArea component but now the automatic scroll down to the last line does not work anymore.

Does anyone have any ideas on which component to use (which one is most suitable) and how to use it ?
As stated these are the requirements:

  • automatic scroll down to the last line
  • copy/paste support
  • scrollbars because some lines are to long to show in the outputArea

Thank you for your help.

Kind regards,
Richard Aalten
TNT Express ICS

2

Hi Richard,

I do it this way:

    memo.setReadOnly(false);
    memo.setValue(cb.getLogEntries());
    if (cb.getLogEntries() != null)
    {
      memo.setCursorPosition(cb.getLogEntries().length() - 1);
    }
    memo.setReadOnly(true);

Copy/paste works out of the box. Scrollbars show up automatically in my app. Unfortunately, some browser don’t scroll to the end, but FF and Opera do scroll down. I did already filed a
ticket
. If you have a pro account you can mark this ticket as priority.

HTH

Andreas

3

Hi Andreas,

Thank you for your reply.

The ListSelect did something similar only I did not knew the setCursorPosition method.

It works fine now.

Thanx again.

Richard

4

I use a different solution. I add a Label component to represent a line inside a Panel. To scroll down, I use panel.setScrollTop(Integer.MAX_VALUE).

5

The following code:
txtArea.setReadOnly(false);
txtArea.setValue(strvalue);
txtArea.setCursorPosition(65535 /big value/);
txtArea.setReadOnly(true);

Seems not being fixed for Chrome yet. It does work under Firefox.

Any other idea to make it work when in Chrome?

6

I’m not sure if this is an issue/limitation in Chrome rather than in Vaadin, but you can
create a ticket
 about this.

7

I was struggling with the same issue using Safari & Chrome.

Finally, this solution seemed acceptable to me :

txtArea.setReadOnly(false);
txtArea.setValue(strvalue);
txtArea.setReadOnly(true);
txtArea.setSelectionRange(txtArea.getValue().length()-1, 1);

any suggestions for a better approach working in most common browsers ?

8

not really, but setting 0 as last param makes at least the selection disappear:

txtArea.setSelectionRange(chatbox.getValue().length() - 1, 0);

9

Hello all,

That seems to works well.

txtArea.setCursorPosition(txtArea.getValue().length());

10

Bertrand Pivaty:
Hello all,

That seems to works well.

txtArea.setCursorPosition(txtArea.getValue().length());

I can confirm this method works fine for a ‘tail’ function.