2015-12-07 16 views
7

मैं भौतिक सीएसएस के साथ काम कर रहा हूं और संकुचित accordion-style element (http://materializecss.com/collapsible.html) का उपयोग कर रहा हूं।भौतिक सीएसएस मोडल काम नहीं कर रहा

किसी कारण से, मैं 5 वें विकल्प के बाद कुछ भी चुनने में सक्षम नहीं था। Here is the picture. मुझे नहीं पता कि मैं पांचवें विकल्प (टेरेनगान यू) के बाद कुछ भी क्यों नहीं चुन सकता।

जब केलंतन पर क्लिक किया जा रहा है, तो पिछले चयनित का मान इसे अपडेट नहीं किया गया है, जबकि केलंतन के ऊपर कुछ भी काम करता है।

मेरा कोड यहां है। मेरा लक्ष्य केवल इच्छित के रूप में ढहने का उपयोग करने में सक्षम होना है (यानी तत्व खोलने और शेष खुला)।

<div class="modal"> 
    <div class="input-field col s4 m6 l12"> 
     <select class="icons"> 
      <option value="" disabled selected>Choose your state</option> 
      <option value="" data-icon="images/flag/perlis.jpg" class="left circle responsive-img">Perlis</option> 
      <option value="" data-icon="images/flag/kedah.jpg" class="left circle responsive-img">Kedah</option> 
      <option value="" data-icon="images/flag/penang.jpg" class="left circle responsive-img">Pulau Pinang</option> 
      <option value="" data-icon="images/flag/perak.jpg" class="left circle responsive-img">Perak</option> 
      <option value="" data-icon="images/flag/terrenganu.jpg" class="left circle responsive-img">Terenggan u</option> 
      <option value="" data-icon="images/flag/kelantan.jpg" class="left circle responsive-img">Kelantan</option> 
      <option value="" data-icon="images/flag/pahang.jpg" class="left circle">Pahang</option> 
      <option value="" data-icon="images/flag/selangor.jpg" class="left circle">Selangor</option> 
      <option value="" data-icon="images/flag/sembilan.jpg" class="left circle">Sembilan</option> 
      <option value="" data-icon="images/flag/malacca.jpg" class="left circle">Malaka</option> 
      <option value="" data-icon="images/flag/johor.jpg" class="left circle">Johor</option> 
      <option value="" data-icon="images/flag/sarawak.jpg" class="left circle">Sarawak</option> 
      <option value="" data-icon="images/flag/sabah.jpg" class="left circle">Sabah</option> 
     </select> 
     <label>Select State</label> 
    </div> 
</div> 

जे एस

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('select').material_select(); 
    }); 
</script> 

JSFiddle: http://jsfiddle.net/8rmjymtr/5/

मैं भी एक ही समस्या के साथ एक और पद मिल गया है। https://github.com/Dogfalo/materialize/issues/2436

+0

तो उम ... आपका ढहने कहां है? इस चयन बॉक्स के साथ क्या करना है? – AVAVT

+0

क्षमा करें मेरा बुरा। यह मोडल के अंदर था, –

+0

यदि आप अपनी समस्या को jsfiddle या किसी चीज़ पर पुन: उत्पन्न कर सकते हैं, तो लोग इसके साथ टिंकर कर सकते हैं, यह बेहतर होगा। आपके द्वारा चिपकाया गया HTML पूरी तरह से सामान्य है और समस्या के बारे में बहुत कुछ नहीं बताता है। दस्तावेज़ के अन्य हिस्सों की वजह से अनपेक्षित व्यवहार सबसे अधिक संभावना है। – AVAVT

उत्तर

0

मैंने अभी बेवकूफ की जांच की है। ऐसा लगता है कि यह मुद्दा चुनिंदा बॉक्स के साथ है। यदि आप ब्राउज़र-डिफ़ॉल्ट में चुनिंदा बॉक्स क्लास को बदलते या जोड़ते हैं। मूर्ख ठीक काम करता है।

<select class="icons browser-default"> // this line 

जब मोडल ऊंचाई इस प्रकार विकल्प जो शुरू में गाया नहीं कर रहे हैं चयन नहीं होने के लिए कारण, पेरेंट तत्व की ऊंचाई से अधिक है इस मुद्दे को सलेक्ट बॉक्स विकल्प डोम के साथ पंजीकृत नहीं किया जा रहा है के साथ है ... इसलिए यदि हम विकल्पों पर क्लिक करते हैं तो क्लिक पंजीकृत नहीं है और विकल्प नहीं चुना गया है।

इसे ठीक करने के लिए आप चुनिंदा बॉक्स के बजाय drop-down का उपयोग कर सकते हैं या यदि यह ठीक है तो ब्राउज़र-डिफ़ॉल्ट चयन बॉक्स के साथ आगे बढ़ें।

0

materialize v0.97.3 में एक बग की तरह लगता है। यहां materialize v0.97.5 के साथ एक पहेली है।

<div class="modal"> 
    <div class="input-field col s4 m6 l12"> 
     <select class="icons"> 
      <option value="" disabled selected>Choose your state</option> 
      <option value="" data-icon="images/flag/perlis.jpg" class="left circle responsive-img">Perlis</option> 
      <option value="" data-icon="images/flag/kedah.jpg" class="left circle responsive-img">Kedah</option> 
      <option value="" data-icon="images/flag/penang.jpg" class="left circle responsive-img">Pulau Pinang</option> 
      <option value="" data-icon="images/flag/perak.jpg" class="left circle responsive-img">Perak</option> 
      <option value="" data-icon="images/flag/terrenganu.jpg" class="left circle responsive-img">Terenggan u</option> 
      <option value="" data-icon="images/flag/kelantan.jpg" class="left circle responsive-img">Kelantan</option> 
      <option value="" data-icon="images/flag/pahang.jpg" class="left circle">Pahang</option> 
      <option value="" data-icon="images/flag/selangor.jpg" class="left circle">Selangor</option> 
      <option value="" data-icon="images/flag/sembilan.jpg" class="left circle">Sembilan</option> 
      <option value="" data-icon="images/flag/malacca.jpg" class="left circle">Malaka</option> 
      <option value="" data-icon="images/flag/johor.jpg" class="left circle">Johor</option> 
      <option value="" data-icon="images/flag/sarawak.jpg" class="left circle">Sarawak</option> 
      <option value="" data-icon="images/flag/sabah.jpg" class="left circle">Sabah</option> 
     </select> 
     <label>Select State</label> 
    </div> 
</div> 

जे एस

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('select').material_select(); 
    }); 
</script> 

फिडल: अद्यतन अमल में लाना संस्करण के साथ http://jsfiddle.net/8rmjymtr/9/

वर्क्स ठीक। क्रोम नवीनतम पर Materialize v0.97.5 के साथ स्थानीय रूप से परीक्षण किया गया।

संबंधित मुद्दे