Vaadin：TextArea 滚动不起作用答案

【问题标题】：Vaadin: TextArea scrolling doesn't workVaadin：TextArea 滚动不起作用
【发布时间】：2017-12-15 14:21:47
【问题描述】：

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

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

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

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

【问题讨论】：

尝试更改 css .v-textarea { overflow-y: auto ! important;}
谢谢，有帮助。您可以将其作为答案提出建议。

标签： textarea vaadin

【解决方案1】：

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

自动换行

setWordwrap() 设置当行长达到书写区域的宽度时是否换行（true - 默认）。 如果禁用自动换行 (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());
    }
}

结果：

【讨论】：

感谢您的详细回答，但我的 TextArea 确实需要自动换行 :(

【解决方案2】：

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

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

【讨论】：