kendo.ui.progress không hoạt động như mong đợi

Question

Tôi đang sử dụng phiên bản miễn phí của web kendo UI. Tôi thấy chỉ báo tiến trình sử dụng mã:

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

nơi $('#loginform') là div mà tôi muốn hiển thị các chỉ số tiến bộ hơn. Tôi đã được ấn tượng chỉ số tiến bộ sẽ được chứa và tập trung trong các div mà tôi cung cấp cho các chức năng. Tuy nhiên, nó dường như được hiển thị trên toàn bộ trang thay thế. Tôi cũng đã thử:

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

và

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

tôi giả sử tôi không sai về cách thức mà nó là nghĩa vụ phải làm việc, nếu không tại sao chức năng sẽ lấy tên của một div ở tất cả. Bất kỳ ý tưởng nào về những gì tôi đang làm sai?

Theo như tôi có thể nói, tôi đang làm điều tương tự. Đây là HTML của tôi:

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

Xin lỗi, tôi không thể tìm ra cách định dạng chính xác. Tôi nghĩ rằng ví dụ jsFiddle chỉ trông trung tâm bởi vì tab đó là toàn bộ trang trong ví dụ.

Answer 1

Bạn cần xác định vị trí cho loginform hoặc relative, absolute hoặc fixed.

Hãy thử thêm các định nghĩa CSS sau:

#loginform { 
    position: relative; 
} 

Bạn cần điều này vì progress cố gắng để hoàn toàn che phần tử HTML có chứa nó. Để làm điều đó, nó xác định width và height là 100%. Vì vậy, để hạn chế kích thước của nó với kích thước của vùng chứa (và không tràn nó), bạn cần phải xác định vị trí là một trong số đó.

Nó cũng có thể hoạt động nếu một số tổ tiên có một trong những vị trí này. Trong trường hợp này, nó sẽ bao gồm 100% số này và không phải là 100% của tổ tiên trước mắt.

Ví dụ: Xác định phong cách sau

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

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

và HTML như:

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

Bạn sẽ thấy rằng nó bao gồm 100% container1 vì đây là fixed khi container2 là static.