kendo.ui.progress non funziona come previsto

Question

Sto usando la versione gratuita di Kendo UI web. Sto mostrando un indicatore di avanzamento utilizzando il codice:

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

dove $('#loginform') è la div che mi piacerebbe mostrare l'indicatore di avanzamento sopra. Avevo l'impressione che l'indicatore di avanzamento fosse contenuto e centrato all'interno dello div che fornisco alla funzione. Tuttavia, sembra che mostri invece l'intera pagina. Ho anche provato:

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

e

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

suppongo non mi sbaglio circa il modo in cui dovrebbe funzionare, altrimenti perché la funzione avrebbe preso il nome di un div a tutti. Qualche idea su cosa sto facendo male?

Per quanto posso dire, sto facendo la stessa cosa. Ecco il mio codice 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> 

Siamo spiacenti, non riesco a capire come formattare correttamente. Penso che l'esempio jsFiddle sia solo centrato perché quella scheda è l'intera pagina nell'esempio.

Answer 1

È necessario definire il posizionamento per loginform o relative, absolute o fixed.

Prova ad aggiungere la seguente definizione CSS:

#loginform { 
    position: relative; 
} 

È necessario questo perché i progress cerca di coprire completamente l'elemento HTML che lo contiene. Per fare ciò, definisce width e height come 100%. Quindi, per vincolare le sue dimensioni alla dimensione del contenitore (e non esagerare), è necessario definire la posizione come una di queste.

Potrebbe anche funzionare se alcuni degli antenati hanno uno di questi posizionamenti. In questo caso coprirà il 100% di questo e non il 100% dell'antenato immediato.

Esempio: Definire i seguenti stili

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

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

e il codice HTML come:

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

Vedrete che copre il 100% dei container1 poiché questo è fixed mentre container2 è static.