7

我正在使用免费版的 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).

我认为我对它应该工作的方式没有错，否则为什么该函数会采用 a 的名称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 示例看起来只是居中，因为该选项卡是示例中的整个页面。

4

1 回答 1

9

您需要为loginform或定义定位relative。absolutefixed

尝试添加以下 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>

你会看到它覆盖了 100%，container1因为这是fixedwhile container2is static。

于 2013-05-25T01:00:32.287 回答