Kendo.ui.progress does not work as expected

Question

I am using the free version of the kendo web interface. I am showing a progress indicator using code:

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

where $('#loginform') is the div I would like to show to the progress bar. I was impressed that the progress indicator would be contained and centered within the div that I am providing the function. However, it seems to display across the page. I also tried:

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

and

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

I suppose I'm not mistaken as to how it should work, otherwise why not use a function like div at all. Any ideas on what I'm doing wrong?

As far as I can tell, I am doing the same. 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 figure out how to format it correctly. I think the jsFiddle example only looks centered because this tab is the entire page in the example.

Answer 1

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

Try adding the following CSS definition:

 #loginform { position: relative; } 

You need this because progress tries to completely cover the HTML element containing it. To do this, it defines width and height as 100%. Thus, in order to limit the size to the size of the container (and not overfill it), you need to determine the position as one of them.

It may also work if any of the ancestors has one of these provisions. In this case, it will cover 100% of this, and not 100% of the nearest 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 HTML like:

 <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 as it is fixed and container2 is static .