Vaadin：TextArea 滚动不起作用

Question

我有类似这段代码的东西：

TextArea textArea = new TextArea();
textArea.setSizeFull();
Panel dataPanel = new Panel("Panel", textArea);
dataPanel.setSizeFull();
textArea.setValue(... some very long text...);

问题是这个 TextArea 出现时没有垂直滚动条（鼠标滚轮滚动也不起作用），尽管内部文本比 TextArea 高度长（我可以导航使用光标和键盘向下箭头降低）。

如何在此组件中启用滚动？

Answer 1

有点奇怪，但根据 documentation 如果您在文本区域中禁用自动换行，您将获得垂直滚动条：

Word Wrap
The setWordwrap() sets whether long lines are wrapped ( true - default) when the line length reaches the width of the writing area. If the word wrap is disabled (false), a vertical scrollbar will appear instead. The word wrap is only a visual feature and wrapping a long line does not insert line break characters in the field value; shortening a wrapped line will undo the wrapping.

以下代码示例说明了 Vaadin 8.0.6 的这种行为。请注意我的 class 扩展 Panel 以匹配您的示例，但此时您可以删除它：

public class PanelWithScrollableTextField extends Panel {
    public PanelWithScrollableTextField() {
        TextArea textArea = new TextArea();
        textArea.setWordWrap(false);
        textArea.setSizeFull();
        setContent(textArea);
        setSizeFull();

        StringBuffer buffer = new StringBuffer();
        IntStream.range(1, 100).forEach(value -> buffer.append(value).append("\r\n"));
        textArea.setValue(buffer.toString());
    }
}

结果：

P.S. 我知道理解起来有点奇怪，但是面板已经习惯了 scroll surfaces that are larger then the panel size，所以如果我们让它工作，您将滚动文本区域本身，而不是其内容。您可以在下面查看示例以更好地理解我的意思：

public class PanelWithScrollableTextField extends Panel {
    public PanelWithScrollableTextField() {
        TextArea textArea = new TextArea();
        textArea.setWordWrap(false);
        textArea.setHeight("500px"); // fixed size with height larger than the panel
        setContent(textArea);
        setHeight("100px"); // fixed height smaller than the content so we get a scroll bar

        StringBuffer buffer = new StringBuffer();
        IntStream.range(1, 100).forEach(value -> buffer.append(value).append("\r\n"));
        textArea.setValue(buffer.toString());
    }
}

结果：

Answer 2

您也可以像下面那样更改它 CSS。

.v-textarea { overflow-y: auto ! important;}

Vaadin：TextArea 滚动不起作用

Vaadin: TextArea scrolling doesn't work

textarea

vaadin