kendo.ui.progress अपेक्षित

Question

के रूप में काम नहीं कर रहा है मैं केंडो यूआई वेब का मुफ्त संस्करण उपयोग कर रहा हूं। मैं एक प्रगति संकेतक कोड का उपयोग कर दिखा रही है:

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

जहां $('#loginform')div है कि मैं के साथ प्रगति सूचक को दिखाने के लिए चाहते हैं। मैं इस धारणा के तहत था कि प्रगति सूचक निहित होगा और div के भीतर केंद्रित होगा जो मैं समारोह को प्रदान करता हूं। हालांकि, ऐसा लगता है कि इसके बजाय पूरे पृष्ठ पर दिख रहा है। मैं भी कोशिश की है:

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

और

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

मुझे लगता है मैं जिस तरह से यह काम करने के लिए चाहिए था के बारे में गलत नहीं कर रहा हूँ, नहीं तो क्यों समारोह में सभी एक div का नाम ले जाएगा। क्या मैं गलत क्या कर रहा हूँ के बारे में कोई विचार?

जहां तक ​​मैं कह सकता हूं, मैं वही कर रहा हूं।

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

क्षमा करें, मैं यह पता लगाने की उसे सही ढंग से स्वरूपित करने के लिए प्रतीत नहीं कर सकते हैं: यहाँ मेरी HTML है। मुझे लगता है कि jsFiddle उदाहरण केवल केंद्रित दिखता है क्योंकि वह टैब उदाहरण में पूरा पृष्ठ है।

Answer 1

आपको loginform या तो relative, absolute या fixed के लिए स्थिति निर्धारित करने की आवश्यकता है।

कोशिश निम्नलिखित सीएसएस परिभाषा जोड़ने:

#loginform { 
    position: relative; 
} 

आप इस की जरूरत है क्योंकि progress की कोशिश करता है पूरी तरह से है कि यह होता है HTML तत्व को कवर किया। ऐसा करने के लिए, यह width और height को 100% के रूप में परिभाषित करता है। इसलिए, कंटेनर के आकार में अपना आकार बाधित करने के लिए (और इसे ओवरफ्लो न करें), आपको स्थिति को इन में से एक के रूप में परिभाषित करने की आवश्यकता है।

यह कुछ भी काम कर सकता है अगर पूर्वजों में से कुछ में इन स्थितिओं में से एक है। इस मामले में इसमें 100% शामिल होगा, न कि तत्काल पूर्वजों का 100%।

उदाहरण:

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

आपको लगता है कि यह container1 की 100% शामिल किया गया है के बाद से इस fixed है, जबकि container2static है देखेंगे: निम्नलिखित शैलियों

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

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

और HTML के रूप में परिभाषित करें।