0

我们在项目中使用 Vaadin 6.8.9。我们正在创建垂直布局的弹出窗口，添加几个标签和按钮。

奇怪的是，当标签的值包含空格（空格、连字符等）时，它会通过在文本下方添加空格来增加其高度。对于每个空格，它看起来就像在末尾添加了一个空行。对于连字符，它更少 - 可能是行的一半。可以这么说，a a a a a a a a消息在屏幕上占用了很多空白空间（标签越多，情况就越糟）。

窗口创建没有魔法。我们只需创建新窗口并将其宽度设置为 600 像素。我们没有为窗口设置任何其他属性，也没有为标签设置任何其他属性。我无法在新的测试 Vaadin 项目上重现它，所以我想问题必须与我们的应用程序有关，但我无法确定它。

以下是为此类标签生成的示例代码：

<div style="height: 180px; width: 54px; overflow: hidden;
    padding-left: 0px; padding-top: 0px;">
    <div style="float: left; margin-left: 0px;">
        <div class="v-label" style="width: 108px;">
            a a a a a a a a a a
        </div>
    </div>
</div>

如果标签值只有一行，为什么第一个 DIV 高 180px？高度计算机制位于何处，是否可以使用 Vaadin API 进行更改？

编辑：这是要求的弹出窗口代码，但我很确定问题不在于这个窗口。

public class InfoNotification extends Window {
    /* Few members and constructor. Members assignment and run init() only. */

    /** This method is run from constructor */
    private void init() {
        setModal(true);
        setResizable(false);
        setStyleName("info_notification");

        okButton = new Button();
        okButton.addListener(getCloseButtonListener(this));
        okButton.setClickShortcut(ShortcutAction.KeyCode.ENTER);
        okButton.setCaption(okLabel != null ? okLabel : SessionData
            .getMessage("infoNotification.okLabel"));

        initLayout();
    }

    private void initLayout() {
        VerticalLayout componentLayout = (VerticalLayout) getContent();
        componentLayout.setWidth(600, UNITS_PIXELS);
        if (messages != null) {
            for (String message : messages) {
                componentLayout.addComponent(new Label(message));
            }
        }
        componentLayout.addComponent(okButton);
        componentLayout.setComponentAlignment(okButton,
            Alignment.BOTTOM_CENTER);
        setReadOnly(false);
    }

    public Button.ClickListener getCloseButtonListener(final Window window) {
        return new Button.ClickListener() { /* listener code */ };
    }
}

当我现在考虑它时，看起来窗口是 600px 宽，但 Vaadin 出于某种原因认为它非常薄（可能是几个像素？）。结果是它保留了更多的高度，因为它检测到许多换行符。实际上，根本没有换行符，并且没有使用空的空间。不过，这只是我的猜测。

EDIT2：我发现当我从组件中删除所有尺寸设置时，标签只有 87px 宽。设置不同的标签宽度不会改变。

private void initLayout() {
    VerticalLayout componentLayout = (VerticalLayout) getContent();
    componentLayout.setWidth(600, UNITS_PIXELS);
    componentLayout.setSizeUndefined(); // Removes all size settings.
    // Rest of method is the same.
}

Vaadin 渲染的 HTML：

<div style="height: 36px; width: 87px; overflow: hidden; padding-left: 0px; padding-top: 0px;">
    <div style="float: left; margin-left: 0px;">
        <div class="v-label" style="width: 87px;">a a a a a a a a a a</div>
    </div>
</div>
4

1 回答 1

0

我解决了这个问题。真正的罪魁祸首是.v-label { width: auto !important; }我的styles.css 中的 CSS 设置。这使得所有后来的宽度设置都被忽略了。

于 2013-07-05T14:10:23.517 回答