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定义#loginform { position: relative; }的定位。

尝试添加以下CSS定义：

progress

你需要这个，因为width试图完全覆盖包含它的HTML元素。为此，它将height和#container1 { position: fixed; border: 1px solid red; margin: 3px; } #container2 { position: static; border: 1px solid green; margin: 30px; }定义为100％。因此，要将其大小限制为容器的大小（并且不要使其溢出），您需要将位置定义为其中之一。

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

示例：定义以下样式

<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>

和HTML为：

container1

您会看到它涵盖fixed的100％，因为container2 static为{{1}}。

kendo.ui.progress无法按预期工作

1 个答案: