kendo-ui - kendo.ui.progress 没有按预期工作

Question

我正在使用免费版的 kendo UI web。我正在使用代码显示进度指示器:

kendo.ui.progress($('#loginform'), true);

哪里 $('#loginform')是 div我想显示进度指示器。我的印象是进度指示器将包含并集中在 div 中。我提供给函数的。但是，它似乎显示在整个页面上。我也试过:

kendo.ui.progress('#loginform', true);

和

kendo.ui.progress('loginform', true); (which caused an error).

我认为我对它应该工作的方式没有错，否则为什么该函数会采用 div 的名称根本。关于我做错了什么的任何想法？

据我所知，我正在做同样的事情。这是我的 HTML:

<form class="form-signin" id="loginform">
    <h2 class="form-signin-heading" style="color:whitesmoke;">Please Sign In</h2>
        <input type="text" id="username" class="input-block-level" placeholder="Username" />
        <input type="password" id="password" class="input-block-level" placeholder="Password" />
    <label class="checkbox" style="color:whitesmoke;">
        <input type="checkbox" id="remember" value="remember-me" /> Remember me
    </label>
    <button type="button" id="login" class="btn btn-large btn-success">OK</button>
    <button type="button" id="cancel" class="btn btn-large btn-danger">Cancel</button>
</form>

抱歉，我似乎无法弄清楚如何正确格式化它。
我认为 jsFiddle 示例只是看起来居中，因为该选项卡是示例中的整个页面。

Answer 1

您需要为 loginform 定义定位要么 relative , absolute或 fixed .

尝试添加以下 CSS 定义:

#loginform {
    position: relative;
}

你需要这个是因为 progress试图完全覆盖包含它的 HTML 元素。为此，它定义了 width和 height作为 100%。因此，要将其大小限制为容器的大小(并且不使其溢出)，您需要将位置定义为其中之一。

如果某些祖先具有这些定位之一，它也可能起作用。在这种情况下，它将覆盖 100% 而不是直接祖先的 100%。

示例:定义以下样式

#container1 {
    position: fixed;
    border: 1px solid red;
    margin: 3px;
}

#container2 {
    position: static;
    border: 1px solid green;
    margin: 30px;
}

和 HTML 为:

<div id="container1">
    <div id="container2">
        <form class="form-signin" id="loginform">
            <h2 class="form-signin-heading" style="color:whitesmoke;">Please Sign In</h2>
            <input type="text" id="username" class="input-block-level" placeholder="Username"/>
            <input type="password" id="password" class="input-block-level" placeholder="Password"/>
            <label class="checkbox" style="color:whitesmoke;">
                <input type="checkbox" id="remember" value="remember-me"/> Remember me </label>
            <button type="button" id="login" class="btn btn-large btn-success">OK</button>
            <button type="button" id="cancel" class="btn btn-large btn-danger">Cancel</button>
        </form>
    </div>
</div>

你会看到它覆盖了 container1 的 100%因为这是 fixed而 container2是 static .