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   

当行长度达到写入区域的宽度时，setWordwrap（）设置是否包装长行（true - default）。 如果禁用自动换行（false），则会显示垂直滚动条。自动换行只是一个视觉功能，包裹一条长行不会在字段值中插入换行符;缩短包裹线将撤消包装。

以下代码示例演示了Vaadin 8.0.6的这种行为。请注意，我的课程会延长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());
    }
}

结果：

PS 我知道它有点奇怪，但面板已经习惯了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;}