Question

我们在项目中使用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>

Answer 1

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

标签高度随着空白值的增加而增加

1 个答案: