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

我假设我对它的工作方式没有错,否则为什么函数会取名为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示例只是看起来居中,因为该选项卡是示例中的整个页面.

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>

你会看到,它占地100% container1,因为这是fixed同时container2的static.