Question

我正在进行chrome扩展。这有一个登录字段，只要输入了无效的凭证，就会显示错误消息。错误消息消失后，窗口不会调整为原始大小。

在错误消息之前：

错误消息：

错误信息后：

在消息消失后，如何确保窗口调整回原始高度？

<body>
    <div class="ui middle aligned center aligned grid">
        <div class="column">
            <div id="authView">
                <h2 class="ui teal header">
                <div class="content" style="margin-top:0.5em;">Log in</div>
                </h2>
                <form class="ui large form" id="login-form">
                    <div class="ui segment">
                        <div id="login-error" class="ui hidden negative message">
                            <p>Invalid username or password. Please try again</p>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input id="username" type="text" name="username" placeholder="Username" autofocus />
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="lock icon"></i>
                                <input id="password" type="password" name="password" placeholder="Password">
                            </div>
                        </div>
                        <input class="ui fluid large teal submit button" type="submit" value="Login">
                    </div>
                </form>
            </div>
            <div id="mainView" style="display:none;">
                <h2 class="ui teal header" style="margin-top:0.5em;">
                    <div class="content">Listening for calls...</div>
                </h2>
                <form class="ui large form" id="call-form">
                    <div class="ui segment">
                        <div class="field">
                            <div class="ui left icon input" id="callDiv">
                                <i class"icon call"></i>
                                <input type="text" id="destNumber" placeholder="Number to call" autofocus />
                            </div>
                        </div>
                        <input class="ui fluid large teal submit button" value="Call" type="submit">
                    </div>
                </form>
                <div>
                    <button class="ui negative button" id="sign-out">
                        <i class="icon sign out"></i>
                        Sign out
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>

使用简单的函数显示错误消息：

function showLoginError(message, duration = 5000) {
    $('#login-error').html(message);
    $('#login-error').removeClass('hidden');
    setTimeout(function () {
        $('#login-error').addClass('hidden');
    }, duration);
}

我正在使用Semantic-UI btw，不确定这是否有所作为。

Answer 1

如果您还没有 - 请尝试明确说明未调整大小的元素的高度为自动。

我知道我遇到了一些问题，如果我没有明确说明，高度在事件发生时定义自己（即使没有内联样式）并且遇到问题。

Chrome扩展程序未调整为原始大小

1 个答案: