当内容比摘要文本宽并且状态更改为打开时，如何使详细信息组件不增加宽度？

Question

我正在使用

Details

组件，并想向其中添加一些内容（通常是比详细信息的摘要文本稍长的文本）。但是，当打开详细信息时，内容会溢出详细信息宽度，从而增加详细信息的整体宽度，这是不需要的行为。

代码：

val details = new Details("Short summary",
                new Span("Very looooooooong text that is wider than summary." +
                            "This span can even be wrapped in layout component like vertical layout"));

示例：

关闭时：

打开时：

使用vaadin 24。

Answer 1

如果未定义“详细信息”元素的宽度（默认情况下未定义），则它将与其可见内容一样宽。展开“详细信息”后，“跨度”将成为其可见内容的一部分，从而展开整个元素。您可以尝试以下方法：

1. 为细节设置特定的宽度。这可以是固定宽度（例如 100px 或 20em），也可以是相对宽度（例如 50%，相对于父元素）。这很可能是正确的方法。
2. 可以获取Summary子元素的渲染宽度。这需要 JavaScript 往返：

Details details = new Details("Short summary",
                new Span("Very looooooooong text that is wider than summary." +
                        "This span can even be wrapped in layout component like vertical layout"));
        add(details);
        details.getElement().executeJs("return $0.getElementsByTagName(\"vaadin-details-summary\")[0].clientWidth;", details.getElement()).then(Integer.class, width-> {
           details.setWidth(width, Unit.PIXELS);
        });

第二种方法非常老套，我建议不要这样做。