CODEWITHSUNDEEP
javavaadinrichtextarea
G Rushton
G Rushton

Reputation: 1

Vaadin RichTextArea dynamically scroll to bottom

I have a basic RichTextArea from Vaadin where I have removed the toolbars.

The normal TextArea has a setCursorPosition function, but the RichTextArea does not.

I need the HTML formatting which is why i dont use the TextArea.

If there is no way to dynamically scroll to the bottom, is there an element I should use instead?

I am using Vaadin 7.7.10

This is how I create and insert the element

textArea = new RichTextArea("Console");
textArea.addStyleName("no-toolbar-top");
textArea.addStyleName("no-toolbar-bottom");

Upvotes: 0

Views: 617

Answers (1)

Mika
Mika

Reputation: 1276

You can create JavaScriptExtension that scrolls to bottom of rich text area.

Create extension

Extension needs a Java class that exposes method that you can call from your view and declares JavaScript file where you add scrolling code.

This example uses ID of rich text area to scroll.

@JavaScript("richtextarea-extension.js")
public class ScrollRichTextAreaExtension extends AbstractJavaScriptExtension {
    public ScrollRichTextAreaExtension(UI ui) {
        extend(ui);
    }

    public void scrollToBottom(RichTextArea richTextArea) {
        callFunction("scrollToBottom", richTextArea.getId());
    }
}

JavaScript file can be placed under src/main/resources. This file could be in path src/main/resource/com/mika/richtextarea/richtextarea-extension.js

Note that Java package and class name are part of first row of this JavaScript file.

window.com_mika_richtextarea_ScrollRichTextAreaExtension = function() {
  var connector = this;
  this.scrollToBottom = function(id) {
    var iframe = document.querySelector("#" + id + " iframe");
    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
    var scrollableContent = iframeDocument.body;
    scrollableContent.scrollTop = scrollableContent.scrollHeight;
  };
};

Use extension in UI

Extension can be registered once per UI object:

public class MyUI extends UI { private ScrollRichTextAreaExtension extension;

@Override
protected void init(VaadinRequest vaadinRequest) {
    extension = new ScrollRichTextAreaExtension(this);
    setContent(createContent());
}

Finally, you can scroll to bottom my calling extension method. This will call JavaScript in the browser and it is the JavaScript code that actually moves the scroll position.

private void onScrollButtonClick(ClickEvent clickEvent) {
    extension.scrollToBottom(richTextArea);
}

Upvotes: 1

Related Questions