当显示隐藏的输入字段时，UI5 对话框会增加其大小

Question

我有一个sap.m.Dialog表格：

当我点击“忘记密码？”时，我会显示一个隐藏的 sap.m.Input 字段：

问题是扩展的表格现在比原始表格大得多。

我试图找出原因，但找不到问题的根源。

单击“忘记密码？”调用 onResetPasswordForm:

onResetPasswordForm() {

    // hide the reset password form
    if (oView.byId("resetPasswordUsername").getVisible()) {

        oView.byId("username").focus();

        oView.byId("resetPasswordUsername").setVisible(false);
        oView.byId("btnResetPassword").setVisible(false);

        oView.byId("resetPasswordUsername").setValue("");

    // show the reset password form
    } else {

        oView.byId("resetPasswordUsername").focus();

        oView.byId("resetPasswordUsername").setValue("");

        oView.byId("resetPasswordUsername").setVisible(true);
        oView.byId("btnResetPassword").setVisible(true);

    }

}

XML-模板：

<core:FragmentDefinition
    xmlns:core = "sap.ui.core"
    xmlns = "sap.m">

    <Dialog
        id = "authDialog"
        contentWidth = "300px"
        title = "{i18n>AUTH_DIALOG_DIALOG_TITLE}"
        type = "Message"
        escapeHandler = ".escapeHandler">

        <Label
            labelFor = "username"
            text = "{i18n>AUTH_DIALOG_LAB_USERNAME}" />

        <Input
            id = "username"
            liveChange = ".onLiveChange"
            placeholder = "{i18n>AUTH_DIALOG_PH_USERNAME}"
            type = "Text" />

        <Label
            labelFor = "password"
            text = "{i18n>AUTH_DIALOG_LAB_PASSWORD}" />

        <Input
            id = "password"
            liveChange = ".onLiveChange"
            placeholder = "{i18n>AUTH_DIALOG_PH_PASSWORD}"
            type = "Password" />

        <Link
            id = "showHideResetPasswordForm"
            text = "{i18n>AUTH_DIALOG_PASSWORD_FORGOT}"
            class = "authFormHelperText"
            press = ".onResetPasswordForm" />

        <Input
            id = "resetPasswordUsername"
            visible = "false"
            liveChange = ".onLiveChange"
            placeholder = "{i18n>AUTH_DIALOG_PH_USERNAME}"
            type = "Text" />

        <beginButton>
            <Button
                id = "btnResetPassword"
                enabled = "false"
                visible = "false"
                press = ".onResetPassword"
                text = "{i18n>AUTH_DIALOG_BTN_RESET_PASSWORD}"
                type = "Emphasized" />
        </beginButton>

        <endButton>
            <Button
                id = "btnLogin"
                enabled = "false"
                press = ".onPressLogin"
                text = "{i18n>AUTH_DIALOG_BTN_SUBMIT}"
                type = "Emphasized" />
        </endButton>

    </Dialog>

</core:FragmentDefinition>

如何在不更改初始 sap.m.Dialog 大小的情况下显示隐藏的 sap.m.Input。

Answer 1

您可以使用属性 contentWidth and contentHeight 来控制内容大小。

后更新：

but more interesting is the reason why does the showing of extra [content] leads to change the dialogue window size?

这可能是 Blink（Chromium 的布局引擎）的本机行为。如果需要呈现额外的 HTMLElement 并且 Dialog 的 <div> 元素 而不是 明确指定 width (getContentWidth() returning an empty value)，<div> 随内容自动增长。

根据 this comment，其他浏览器的行为有所不同。因此，在这种情况下，对话框会尝试“修复”它。

Answer 2

尝试用vh设置Dialog的高度。希望能奏效。

当显示隐藏的输入字段时，UI5 对话框会增加其大小

UI5 dialog increases its size when the hidden input field is shown

sapui5