सीएसएस को मटेरियल करें - रेंडर के लिए सीम नहीं चुनें

Question

मैं वर्तमान में सीएसएस के साथ काम कर रहा हूं और ऐसा लगता है कि मैं चुनिंदा क्षेत्रों से प्रभावित हो गया हूं।

मैं उनकी साइट से प्रदान किए गए उदाहरण का उपयोग कर रहा हूं, लेकिन दुर्भाग्य से यह दृश्य में प्रदान कर रहा है। मैं सोच रहा था कि क्या कोई और मदद कर सकता है।

मैं जो करने की कोशिश कर रहा हूं वह 2 एंड स्पेसर्स के साथ एक पंक्ति बनाता है जो पैडिंग प्रदान करता है - फिर भीतर की दो पंक्ति वस्तुओं के भीतर एक खोज पाठ इनपुट और एक खोज चयन ड्रॉपडाउन होना चाहिए।

यह वह उदाहरण है, जिससे मैं काम कर रहा हूं: http://materializecss.com/forms.html

पहले ही, आपका बहुत धन्यवाद।

यहाँ प्रश्न में कोड का स्निपेट है।

<div class="row">
<form class="col s12">
    <div class="row">
        <div class="input-field col s2"></div>
        <div class="input-field col s5">
            <input id="icon_prefix" type="text" class="validate" />
            <label for="icon_prefix">Search</label>
        </div>
        <div class="input-field col s3">
            <label>Materialize Select</label>
            <select>
                <option value="" disabled="disabled" selected="selected">Choose your option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>
        <div class="input-field col s2"></div>
    </div>
</form>

Answer 1

क्योंकि वे ब्राउज़र डिफ़ॉल्ट को ओवरराइड करते हैं, चुनिंदा स्टाइल को चलाने के लिए जावास्क्रिप्ट की आवश्यकता होती है। आपको जावास्क्रिप्ट फ़ाइल सम्मिलित करने की आवश्यकता है, और फिर कॉल करें

$(document).ready(function() {
    $('select').material_select();
});

आपके द्वारा उस फ़ाइल को लोड करने के बाद।

Comments

अन्यथा आप ब्राउज़र को डिफॉल्ट रूप से उपयोग कर सकते हैं और इनिशियलाइज़ेशन की आवश्यकता नहीं है:<select class="browser-default">

— Shwaydogg

नवीनतम चैंज यह कहता है:Rename plugin call .material_select() to .formSelect()

— ss2025

इसे $ (दस्तावेज़) में न लिखें। पहले से ही (फ़ंक्शन () {अन्यथा यह काम नहीं करेगा

— एचएन सिंह

शीश! मैं एक ईंट की दीवार के खिलाफ अपना सिर पीट रहा हूं ताकि यह पता लगाने की कोशिश की जा सके ... धन्यवाद ....

— क्लाइड

Answer 2

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

आपको सेलेक्ट एलिमेंट को इनिशियलाइज़ करना है material_select() @ Littleguy23 उल्लेखों के । यदि आप नहीं करते हैं, तो चयन बॉक्स भी प्रदर्शित नहीं होता है! एक पुराने जमाने के jQuery ऐप में, मैं इसे दस्तावेज़ तैयार फ़ंक्शन में आरंभ कर सकता हूं। लगता है क्या, न तो मैं और न ही कई अन्य लोग इन दिनों jQuery का उपयोग कर रहे हैं, और न ही हम दस्तावेज़ तैयार हुक में अपने एप्लिकेशन को इनिशियलाइज़ करते हैं।

गतिशील रूप से निर्मित चयन । क्या होगा अगर मैं गतिशील रूप से चयन कर रहा हूं, जैसे कि एम्बर जैसे ढांचे में होता है जो मक्खी पर विचार उत्पन्न करता है? जब भी कोई दृश्य उत्पन्न होता है, तो मुझे प्रत्येक बॉक्स में लॉजिक जोड़ना होगा, जब भी कोई दृश्य उत्पन्न होता है, या मेरे लिए उसे देखने के लिए एक व्यू मिक्सिन लिखें। और यह इससे भी बदतर है: जब दृश्य उत्पन्न होता है, और एम्बर शब्दों didInsertElementमें कहा जाता है, तो चयन बॉक्स के लिए विकल्पों की सूची के लिए बाध्यकारी अभी तक हल नहीं किया गया हो सकता है, इसलिए मुझे विशेष तर्क की आवश्यकता है जो तब तक प्रतीक्षा करने के लिए विकल्प सूची का अवलोकन कर रहा है। कॉल करने से पहले पॉपुलेटेड material_select। यदि विकल्प बदलते हैं, जैसा कि वे आसानी से हो सकते हैं, तो material_selectइसके बारे में कोई विचार नहीं है और ड्रॉपडाउन अपडेट नहीं करता है। material_selectजब विकल्प बदलते हैं तो मैं फिर से कॉल कर सकता हूं , लेकिन ऐसा प्रतीत होता है कि कुछ भी नहीं है (अनदेखा किया गया है)।

दूसरे शब्दों में, ऐसा प्रतीत होता है कि सीएसएस के चुनिंदा बक्सों के पीछे डिज़ाइन की धारणा यह है कि वे सभी पृष्ठ लोड पर हैं, और उनकी स्थिति कभी नहीं बदलती।

क्रियान्वयन । सौंदर्य की दृष्टि से, मैं सीएसएस को उसके ड्रॉपडाउन को लागू करने के तरीके के पक्ष में नहीं हूं, जो डोम में कहीं और तत्वों के समानांतर, छाया सेट बनाने के लिए है। दी गई, विकल्प 2 जैसे विकल्प एक ही काम करते हैं, और दृश्य प्रभावों में से कुछ को प्राप्त करने का कोई अन्य तरीका नहीं हो सकता है (वास्तव में?)। मेरे लिए, हालांकि, जब मैं एक तत्व का निरीक्षण करता हूं, तो मैं तत्व को देखना चाहता हूं, न कि कुछ छाया संस्करण कहीं और जो किसी ने जादुई रूप से बनाया हो।

जब एम्बर दृश्य को फाड़ता है, तो मुझे यकीन नहीं है कि सीएसएस इसे बनाए गए छाया तत्वों को फाड़ देता है। वास्तव में, अगर यह करता है तो मुझे काफी आश्चर्य होगा। यदि मेरा सिद्धांत सही है, जैसा कि विचार उत्पन्न होते हैं और नीचे फाड़ दिए जाते हैं, तो आपका DOM किसी भी चीज़ से कनेक्ट नहीं होने के दर्जनों सेट के साथ प्रदूषित हो जाएगा। यह न केवल एम्बर पर बल्कि किसी अन्य MVC / टेम्प्लेट-आधारित OPA फ्रंट-एंड फ्रेमवर्क पर लागू होता है।

बाइंडिंग । मैं यह भी पता लगाने में सक्षम नहीं हुआ हूं कि एम्बर जैसे ढांचे में उपयोगी किसी भी चीज को वापस करने के लिए संवाद बॉक्स में चयनित मूल्य को कैसे प्राप्त किया जाए जो एक {{view 'Ember.Select' value=country}}प्रकार के इंटरफेस के माध्यम से चुनिंदा बक्से को आमंत्रित करता है। दूसरे शब्दों में, जब कुछ चुना जाता है, countryतो उसे अपडेट नहीं किया जाता है। यह एक डील-ब्रेकर है।

लहरें । वैसे, वही मुद्दे बटन पर "लहर" प्रभाव पर लागू होते हैं। आपको हर बार एक बटन बनाने के लिए इसे इनिशियलाइज़ करना होगा। मैं व्यक्तिगत रूप से लहर के प्रभाव के बारे में परवाह नहीं करता, और समझ में नहीं आता कि सभी उपद्रव के बारे में क्या है, लेकिन अगर आप लहरों को चाहते हैं, तो ध्यान रखें कि आप अपने जीवन के बाकी हिस्सों का एक अच्छा हिस्सा बिताएंगे कि कैसे चिंता करें हर एक बटन को इनिशियलाइज़ करें जब यह बना हो।

मैं सीएसएस दोस्तों द्वारा किए गए प्रयासों की सराहना करता हूं, और वहां कुछ अच्छे दृश्य प्रभाव हैं, लेकिन यह बहुत बड़ा है और इसके पास बहुत सारे गोचर हैं जैसे कि ऊपर कुछ ऐसा होगा जो मैं उपयोग करूंगा। अब मैं अपने ऐप से CSS को भौतिक बनाने की कोशिश कर रहा हूं और वापस बूटस्ट्रैप या सूट सीएसएस के ऊपर एक लेयर पर जा सकता हूं। आपके उपकरण आपके जीवन को आसान बनाने चाहिए, कठिन नहीं।

Comments

व्यापक प्रतिक्रिया के लिए धन्यवाद। यह बहुत जानकारीपूर्ण है और मैं आपके द्वारा व्यक्त की गई भावनाओं के बहुत से सहमत हूं। मैं वास्तव में बहुत सी चीजों के साथ सीएसएस और उनके दृष्टिकोण को भौतिक बनाना पसंद करता हूं। मुझे ठीक वही मिलता है जो आप कह रहे हैं और सभी 'इफेक्ट्स' के बारे में बहुत सोच रहे हैं, जो आधुनिक ऐप्स मांगेंगे। मुझे यकीन नहीं है कि इस प्रकार के डिजाइन और अवधारणाएं अभी तक बड़े पैमाने पर सॉफ़्टवेयर में फिट हैं। मुझे यकीन है कि देखो और अवधारणाओं को पसंद करते हैं। फिर से धन्यवाद।

— रयान रेंटफ्रो

शानदार प्रतिक्रिया। सामग्री के साथ सेलेक्ट मुद्दों में भी चल रहा है, जैसे स्क्रॉल सूची पर क्लिक करें विकल्प सूची को खारिज करना। @torazaburo आपने आखिर क्या किया? वापस बूटस्ट्रैप के लिए?

— शॉन ओ

@ सीनो अभी के लिए, हाँ।

मैंने अपने अधिकांश वेब पेज और फ़ॉर्म को भौतिक बनाने के लिए पर्याप्त समय दिया, लेकिन अब चयन समस्या को हल करने के तरीके में फंस गया। इसका वास्तव में बहुत बुरा है, भौतिकविदों में बहुत बड़ा ट्रैफ़िक है लेकिन फिर भी इस मामूली मुद्दे को हल नहीं करते हैं। यदि आप इसे कुछ उपभोक्ता उत्पाद के लिए उपयोग करने के लिए मूल्यांकन कर रहे हैं, तो परिपक्व होने तक प्रतीक्षा करें

— आसिफ शहजाद

आप उपयोग कर सकते हैं <select class="browser-default">और आपको js के साथ इनिशियलाइज़ नहीं करना पड़ेगा और आपके पास मूल UI होगा जो उपयोगकर्ता के आदी है। जेएस आरंभीकरण किसी भी कार्यान्वयन के लिए आवश्यक होने जा रहा है जो देशी UI का उपयोग नहीं करता है।

— श्वेदोग सेप

Answer 3

@ Littleguy23 यह सही है, लेकिन आप इसे मल्टी सेलेक्ट नहीं करना चाहते हैं। तो कोड में बस एक छोटा सा बदलाव:

$(document).ready(function() {
    // Select - Single
    $('select:not([multiple])').material_select();
});

Comments

क्यों? यदि हम कई चुनिंदा क्षेत्रों को बाहर करते हैं, तो वे काम नहीं करेंगे।

— देशप्रेम

Answer 4

इसने मेरे लिए काम किया, इनपुट क्लास के साथ कोई जेकरी या सिलेक्टेड रैपर, सिर्फ मैटेरियल। जेएस और इस वेनिला जेएस:

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems);
});

जैसा कि आप बता सकते हैं कि मुझे भौतिक रूप से सीएसएस वास्तविक रूप से मिला है, न कि ब्राउज़र डिफ़ॉल्ट।

Answer 5

यह भी काम करता है: वर्ग = "ब्राउज़र-डिफ़ॉल्ट"

Answer 6

यदि आप Angularjs का उपयोग कर रहे हैं, तो आप कोणीय-मटेरियल प्लगइन का उपयोग कर सकते हैं , जो कुछ आसान निर्देश प्रदान करता है। फिर आपको js में आरंभ करने की आवश्यकता नहीं है, बस material-selectअपने चयन में जोड़ें :

<div input-field>
    <select class="" ng-model="select.value1" material-select>
        <option ng-repeat="value in select.choices">{{value}}</option>
    </select>
</div>

Answer 7

विकल्प डेटा लोड होने के बाद मेरे लिए जो समाधान काम किया है वह 'material_select' फ़ंक्शन को कॉल करके है। यदि आप OptionsList.find () (।) () को सांत्वना के मान को पहले 0 पर प्रिंट करते हैं तो कुछ मिलीसेकंड बाद में सूची डेटा से आबाद हो जाती है।

Template.[name].rendered = function() {
    this.autorun(function() {
        var optionsCursor = OptionsList.find().count();
        if(optionsCursor > 0)
        {
            $('select').material_select();
        }
    });
};

Comments

ब्रांडीका को अच्छा लगा! मैंने कॉल $('select').material_select();किया था AppComponent.ngOnInit(), लेकिन <select/>html के रेंडर होने के बाद आपको इसे कॉल करने की आवश्यकता है, जो मैंने अंदर किया था dropdown.component.ts। तय यह था कि ngOnInit()जो भी कंपोनेंट ड्रॉपडाउन का इस्तेमाल करता है, उसके भीतर से कॉल आए ।

— लेवी फुलर

Answer 8

मेरे लिए अन्य उत्तरों में से किसी ने भी काम नहीं किया क्योंकि मैं MaterializeCSS और उल्का के नवीनतम संस्करण का उपयोग कर रहा हूं और jquery संस्करणों के बीच असंगतता है, Meteor 1.1.10 jquery 1.11 का उपयोग करता है (इस निर्भरता को समझना आसान नहीं है और शायद उल्कापिंड / ब्लेज़ को तोड़ देगा) और परीक्षण 2.2 के साथ काम करता है ठीक से काम करता है। अधिक जानकारी के लिए https://stackoverflow.com/a/34809976/2882279 देखें ।

यह ड्रॉपडाउन के साथ एक ज्ञात समस्या है और 0.97.2 और 0.97.3 के भौतिककरण में चयन करता है; अधिक जानकारी के लिए देख https://github.com/Dogfalo/materialize/issues/2265 और https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931 ।

मैं उल्कापिंड में MaterializeCSS के सैस संस्करण का उपयोग कर रहा हूं और पुराने संस्करण को मजबूर करने के लिए मेरे उल्का संकुल फ़ाइल में काव्य: मटेरियल-scss@1.97.1 का उपयोग करके समस्या के आसपास काम कर रहा हूं। ड्रॉपडाउन अब काम करते हैं, पुराने jquery और सभी!

Answer 9

Html के रेंडर होने के बाद ही materialize css jquery कोड को कॉल करें। तो आपके पास एक नियंत्रक हो सकता है और फिर एक सेवा को आग लगा सकता है जो नियंत्रक में jquery कोड को कॉल करता है। यह ठीक बटन का चयन करेगा। यदि आप ngChange या ngSubmit का उपयोग करने की कोशिश करते हैं, तो यह कैसे हो सकता है कि यह चयन टैग के गतिशील स्टाइल के कारण काम न करे।

Answer 10

केवल इसने मेरे लिए काम किया:

$(document).ready(function(){
    $('select').not('.disabled').formSelect();
});

Answer 11

मैंने अपने आप को एक ऐसी स्थिति में पाया जहां चयनित समाधान का उपयोग कर रहा था

$(document).ready(function() {
$('select').material_select();
}); 

जो भी कारण के लिए त्रुटियों को फेंक रहा था क्योंकि material_select () फ़ंक्शन नहीं मिला। सिर्फ कहना संभव नहीं था <select class="browser-default... क्योंकि मैं एक ऐसे ढांचे का उपयोग कर रहा था जो रूपों को स्वतः प्रस्तुत करता है। तो मेरा समाधान js (Jquery) का उपयोग करके कक्षा को जोड़ना था

<script>
 $(document).ready(function() {
   $('select').attr("class", "browser-default")
});

Answer 12

पहले, सुनिश्चित करें कि आप इसे इस तरह से पहले ही प्रलेखित कर लें।

$(document).ready(function () {
    $('select').material_select();
});

फिर, अपने डेटा को अपने इच्छित तरीके से पॉप्युलेट करें। मेरा उदाहरण:

    function FillMySelect(myCustomData) {
       $("#mySelect").html('');

        $.each(myCustomData, function (key, value) {
           $("#mySelect").append("<option value='" + value.id+ "'>" + value.name + "</option>");
        });
}

सुनिश्चित करें कि आपके द्वारा आबादी के साथ किए जाने के बाद, इस सामग्री को ट्रिगर करने के लिए इस तरह:

$("#mySelect").trigger('contentChanged');

Answer 13

डिफ़ॉल्ट ब्राउज़र के लिए,

<head>
     select {
            display: inline !important;
         }
</head>

या लिंक टी के बाद Jquery समाधान Jquery पुस्तकालय और अपने स्थानीय / CDN फ़ाइलों को भौतिक

<script>
(function($){
  $(function(){
    // Plugin initialization
    $('select').not('.disabled').formSelect();
  }); 
})(jQuery); // end of jQuery name space

मैं वास्तव में इस ढांचे को पसंद करता हूं, लेकिन प्रदर्शन के लिए पृथ्वी पर क्या है: कोई नहीं ...

Answer 14

बस इस पर अनुवर्ती कार्रवाई के बाद से शीर्ष उत्तर का उपयोग नहीं करने की सिफारिश की है ... भौतिकता के मौजूदा संस्करण में अब आपको चयनों को शुरू करने की आवश्यकता नहीं है।

Comments

मैं संस्करण 0.95.3 का उपयोग कर रहा हूं और मुझे अभी भी चयनों को प्रारंभ करना है। क्या मुझसे कुछ गलत हो रही है?

— उरेल हर्नांडेज़

आपको अभी भी v0.96.1 में (गैर-ब्राउज़र-डिफ़ॉल्ट) चयन को इनिशियलाइज़ करने की आवश्यकता है।

— शॉन ओ

डाउनवोट: वे v0.97.1 में हैं और आपको अभी भी जावास्क्रिप्ट के साथ चयन करने की आवश्यकता है।

— पाब्लो फर्नांडीज

०.१००.२: चयनों को आरंभीकृत करने की आवश्यकता है। इस बात का कोई प्रमाण नहीं है कि यह उत्तर कभी सही रहा है।

— जेजे