kendo.ui.progress not working as expected

Question

I'm using the free version of kendo UI web. I'm showing a progress indicator using the code:

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

where $('#loginform') is the div that I'd like to show the progress indicator over. I was under the impression the progress indicator would be contained and centered within the div that I provide to the function. However, it appears to be showing over the entire page instead. I've also tried:

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

and

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

I assume I'm not wrong about the way it's supposed to work, otherwise why would the function take the name of a div at all. Any ideas as to what I'm doing wrong?

As far as I can tell, I'm doing the same thing. Here is my 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>

Sorry, I can't seem to figure out how to format it correctly. I think the jsFiddle example only looks centered because that tab is the entire page in the example.

Answer 1

You need to define positioning for loginform either relative, absolute or fixed.

Try adding the following CSS definition:

#loginform {
    position: relative;
}

You need this because the progress tries to completely cover the HTML element that contains it. To do that, it defineswidth and height as 100%. So, to constrain its size to the size of the container (and do not overflow it), you need to define the position as one of these.

It might also work if some of the ancestor have one of these positioning. In this case it will cover the 100% of this and not the 100% of the immediate ancestor.

Example: Define the following styles

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

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

and the HTML as:

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

You will see that it covers 100% of container1 since this is fixed while container2 is static.