kendo.progress funktioniert nicht wie erwartet

Question

Ich benutze die kostenlose Version von Kendo UI Web. Ich zeige eine Statusanzeige mit dem Code:

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

wo $('#loginform') ist die div, Ich mag würde über die Fortschrittsanzeige zeigen. Ich hatte den Eindruck, dass der Fortschrittsindikator innerhalb der div enthalten und zentriert sein würde, die ich der Funktion zur Verfügung stelle. Es scheint jedoch stattdessen über die gesamte Seite angezeigt werden. Ich habe auch versucht:

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

und

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

Ich nehme an, ich bin nicht falsch über die Art und Weise es angenommen hat, sonst zu arbeiten, warum die Funktion den Namen eines div überhaupt nehmen würde. Irgendwelche Ideen, was ich falsch mache?

Soweit ich das beurteilen kann, mache ich das gleiche. Hier ist mein 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> 

Entschuldigung, ich kann nicht scheinen, herauszufinden, wie man es richtig formatiert. Ich denke, dass das Beispiel jsFiddle nur zentriert aussieht, da diese Registerkarte die gesamte Seite in dem Beispiel ist.

Answer 1

Sie müssen die Positionierung für loginform entweder relative, absolute oder fixed definieren.

Versuchen, den folgenden CSS-Definition:

#loginform { 
    position: relative; 
} 

Sie benötigen dies, weil die progress versucht vollständig das HTML-Element abzudecken, die es enthält. Dazu definiert es width und height als 100%. Um seine Größe auf die Größe des Containers zu beschränken (und ihn nicht zu überfließen), müssen Sie die Position als eine dieser Positionen definieren.

Es könnte auch funktionieren, wenn einige der Vorfahren eine dieser Positionen haben. In diesem Fall deckt es die 100% und nicht die 100% des unmittelbaren Vorfahren.

Beispiel: Definieren Sie die folgenden Arten

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

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

und den HTML-Code als:

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

Sie werden sehen, dass es 100% von container1 bedeckt, da diese fixed ist während container2static ist.