kendo.ui.progress nie działa zgodnie z oczekiwaniami.

Question

Używam darmowej wersji strony Kendo UI. Ja pokazuje wskaźnik postępu przy użyciu kodu:

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

gdzie $('#loginform') jest div że chciałbym pokazać wskaźnik postępu nad. Byłem pod wrażeniem, że wskaźnik postępu będzie zawarty i wyśrodkowany w ramach funkcji div. Jednak wygląda na to, że wyświetla się na całej stronie. Próbowałem również:

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

i

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

Zakładam, że nie mylę o sposób to ma działać, inaczej dlaczego funkcja miałaby nazwę div w ogóle. Jakieś pomysły dotyczące tego, co robię źle?

O ile mi wiadomo, robię to samo. Oto mój kod 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> 

Niestety, nie mogę wymyślić, jak poprawnie sformatować. Myślę, że przykład jsFiddle wygląda tylko wyśrodkowany, ponieważ ta karta jest całą stroną w przykładzie.

Answer 1

Musisz zdefiniować pozycjonowanie dla loginform albo relative, absolute lub fixed.

spróbuj dodać następującą definicję CSS:

#loginform { 
    position: relative; 
} 

Trzeba to ponieważ progress stara się całkowicie pokrywać elementu HTML, który go zawiera. Aby to zrobić, definiuje width i height jako 100%. Aby ograniczyć jego rozmiar do rozmiaru kontenera (i nie przepełniać go), należy zdefiniować pozycję jako jedną z nich.

Może również działać, jeśli część przodka ma jedno z tych ustawień. W tym przypadku pokryje to 100% tego, a nie 100% bezpośredniego przodka.

Przykład: Zdefiniuj następujące style

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

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

i HTML jak:

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

widać, że obejmuje ona 100% container1 ponieważ jest fixed podczas container2 jest static.