সিএসএস ম্যাটারিয়ালাইজ করুন - রেন্ডার মনে হয় না নির্বাচন করুন

Question

আমি বর্তমানে সিএসএস মেটেরাইজেশনের সাথে কাজ করছি এবং মনে হচ্ছে আমি নির্বাচিত ক্ষেত্রগুলির সাথে আটকা পড়েছি।

আমি তাদের সাইট থেকে সরবরাহিত উদাহরণটি ব্যবহার করছি তবে দুর্ভাগ্যক্রমে এটি যা কিছু তা ভিউতে উপস্থাপন করছে। আমি ভাবছিলাম যে অন্য কেউ সাহায্য করতে সক্ষম হতে পারে কিনা।

আমি যা করার চেষ্টা করছি সেটি হল 2 টি শেষ স্পেসার যা একটি প্যাডিং সরবরাহ করে একটি সারি তৈরি করে - তারপরে অভ্যন্তরীণ দুটি সারি আইটেমের মধ্যে একটি অনুসন্ধান পাঠ্য ইনপুট এবং একটি অনুসন্ধান নির্বাচন ড্রপডাউন থাকা উচিত।

এই উদাহরণটি থেকে আমি কাজ করছি: http://matoryizecss.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">

— শ্বেডোগ

সর্বশেষ পরিবর্তণের বলে:Rename plugin call .material_select() to .formSelect()

— ss2025

অন্যথায় এটা করবে কাজ না $ (ডকুমেন্ট) এ এই লিখতে না .ready (ফাংশন () {

— এইচ এন সিং

Sheesh! আমি কয়েক ঘন্টা ধরে এটি বোঝার চেষ্টা করে একটি ইটের প্রাচীরের বিরুদ্ধে আমার মাথাটি পিটিয়েছি ... ধন্যবাদ ....

— ক্লাইড

Answer 2

selectসিএসএস বাস্তবায়নের কার্যকারিতার নকশাটি আমার মতে এটি ব্যবহার না করার একটি দুর্দান্ত কারণ good

material_select()@ লিটলগুয়াই 23 যেমন উল্লেখ করেছেন আপনাকে আপনাকে নির্বাচন উপাদানটি শুরু করতে হবে । আপনি যদি না করেন, তবে নির্বাচিত বাক্সটি প্রদর্শিত হবে না! একটি পুরানো ফ্যাশন jQuery অ্যাপ্লিকেশন, আমি নথি প্রস্তুত ফাংশন এ এটি আরম্ভ করতে পারেন। কী তা অনুমান করুন, আমি বা অন্য অনেকেই এই দিনগুলিতে jQuery ব্যবহার করছে না, বা আমরা নথিতে প্রস্তুত হুকটিতে আমাদের অ্যাপ্লিকেশনগুলি আরম্ভ করব না।

গতিশীলভাবে নির্বাচিত নির্বাচন । আমি যদি গতিশীলভাবে নির্বাচনগুলি তৈরি করছি, যেমন এমবারের মতো কাঠামোয় ঘটে যা ফ্লাইতে ভিউ তৈরি করে? আমাকে প্রতিটি ভিউতে যুক্তি যুক্ত করতে হবে প্রতিবার যখন কোনও ভিউ তৈরি হয় তবে নির্বাচিত বাক্সটি শুরু করতে বা আমার জন্য এটি পরিচালনা করতে একটি ভিউ মিক্সিন লিখতে হয়। এবং এটি এর চেয়েও খারাপ: যখন ভিউ তৈরি করা হয় এবং এম্বার পদগুলিতে didInsertElementডাকা হয় তখন, নির্বাচিত বাক্সের বিকল্পগুলির তালিকার সাথে বাধ্যতামূলক এখনও সমাধান করা যায় নি, সুতরাং অপেক্ষার তালিকার জন্য অপেক্ষা করার জন্য আমার বিশেষ যুক্তির প্রয়োজন আছে কল করার আগে জনবহুল material_select। যদি বিকল্পগুলি পরিবর্তিত হয়, যেমন তারা সহজেই পারে, material_selectসে সম্পর্কে তাদের কোনও ধারণা নেই এবং ড্রপডাউনটি আপডেট না করে। material_selectবিকল্পগুলি পরিবর্তিত হয়ে গেলে আমি আবার কল করতে পারি , তবে এটি প্রদর্শিত হয় যা কিছুই করে না (উপেক্ষা করা হয়)।

অন্য কথায়, এটি উপস্থিত হয় যে সিএসএসের নির্বাচিত বাক্সগুলিকে বাস্তবায়িত করার পেছনের নকশা অনুমানটি হ'ল তারা এখানে পৃষ্ঠার লোডে রয়েছে এবং তাদের মানগুলি কখনই বদলায় না।

বাস্তবায়ন । একটি নান্দনিক দৃষ্টিকোণ থেকে, আমি সিএসএস তার ড্রপডাউনগুলি যেভাবে প্রয়োগ করে, তার পক্ষেও আমি পক্ষে নই, এটি ডিওএমের অন্য কোথাও কোথাও উপাদানগুলির একটি সমান্তরাল, ছায়া গোষ্ঠী তৈরি করা। মঞ্জুর, বিকল্প 2 যেমন বিকল্পগুলি একই কাজ করে এবং কিছু ভিজ্যুয়াল এফেক্ট (সত্যিকারের?) অর্জনের উপায় নেই be আমার কাছে, যদিও আমি যখন কোনও উপাদানটি পরিদর্শন করি তখন আমি উপাদানটি দেখতে চাই, এমন কোনও ছায়া সংস্করণ অন্য কোথাও নয় যা কেউ যাদুকরীভাবে তৈরি করেছিল।

এম্বার যখন ভিউটি চোখের জল ফেলেন, তখন আমি নিশ্চিত নই যে সিএসএস চোখের জলগুলি তৈরি করেছে it আসলে, আমি যদি তা করি তবে আমি বেশ অবাক হব। যদি আমার তত্ত্বটি সঠিক হয়, যেমন মতামত উত্পন্ন এবং ছিন্নভিন্ন হয়ে যায়, আপনার ডোম কোনও কিছুর সাথে সংযুক্ত না থাকা কয়েক ডজন শেডো ড্রপডাউনগুলির সাথে দূষিত হয়ে যাবে। এটি কেবল আম্বরের ক্ষেত্রেই নয়, অন্য কোনও এমভিসি / টেম্পলেট-ভিত্তিক ওপিএ ফ্রন্ট-এন্ড ফ্রেমওয়ার্কের ক্ষেত্রেও প্রযোজ্য।

বাঁধাই । এম্বারের মতো কাঠামোয় যে কোনও দরকারী {{view 'Ember.Select' value=country}}ইন্টারফেসের মাধ্যমে নির্বাচিত বাক্সগুলি আহ্বান করে সেগুলি কীভাবে আবার সংযুক্ত করতে ডায়লগ বাক্সে নির্বাচিত মানটি কীভাবে পাবেন তা আমিও বুঝতে সক্ষম হইনি । অন্য কথায়, যখন কোনও কিছু নির্বাচন করা হয় তখন countryআপডেট হয় না। এটি একটি চুক্তিভঙ্গকারী।

তরঙ্গ । যাইহোক, একই সমস্যাগুলি বোতামগুলিতে "তরঙ্গ" প্রভাবের ক্ষেত্রে প্রযোজ্য। প্রতিবার একটি বোতাম তৈরি হওয়ার সময় আপনাকে এটিকে আরম্ভ করতে হবে। আমি ব্যক্তিগতভাবে তরঙ্গ প্রভাব সম্পর্কে চিন্তা করি না এবং সমস্ত কোলাহলটি কী তা বুঝতে পারি না তবে আপনি যদি তরঙ্গ চান তবে সচেতন হন যে আপনি কীভাবে করবেন তা নিয়ে উদ্বেগ নিয়ে আপনার বাকী জীবনের একটি ভাল অংশ ব্যয় করবেন aware এটি তৈরি হওয়ার পরে প্রতিটি একক বোতামটি আরম্ভ করুন।

আমি সিএসএস ছেলেরা বস্তুগতকরণের চেষ্টাটির প্রশংসা করি এবং সেখানে কিছু দুর্দান্ত ভিজ্যুয়াল এফেক্ট রয়েছে তবে এটি খুব বড় এবং উপরের মতো অনেকগুলি গ্যাচচ রয়েছে যা আমি ব্যবহার করব। আমি এখন আমার অ্যাপ্লিকেশন থেকে সিএসএস তৈরি করতে এবং বুটস্ট্র্যাপ বা স্যুট সিএসএসের শীর্ষে একটি স্তরে ফিরে যাওয়ার পরিকল্পনা করছি। আপনার সরঞ্জামগুলি আপনার জীবনকে আরও সহজ করে তুলবে, কঠিন নয়।

Comments

ব্যাপক প্রতিক্রিয়া জন্য আপনাকে ধন্যবাদ। এটি অত্যন্ত তথ্যবহুল এবং আপনি প্রকাশিত অনেকগুলি অনুভূতির সাথে আমি একমত। আমি সত্যই সিএসএস এবং অনেকগুলি জিনিস নিয়ে তাদের পদ্ধতির পছন্দ করি। আপনি যা বলছেন ঠিক তা পেয়েছি এবং আধুনিক অ্যাপ্লিকেশনগুলির যে সমস্ত অ্যাপ্লিকেশনগুলির চাহিদা থাকবে সে সম্পর্কে অনেক চিন্তাভাবনা করেছি। আমি নিশ্চিত নই যে এই ধরণের ডিজাইন এবং ধারণাগুলি এখনও বড় আকারের সফ্টওয়্যারগুলির সাথে ফিট করে। আমি অবশ্যই চেহারা এবং ধারণা মত পছন্দ করি। আবার আপনাকে ধন্যবাদ.

— রায়ান রেন্টফ্রো

দুর্দান্ত সাড়া। অপটিশনের তালিকাটি বরখাস্ত করার মতো স্ক্রোলবারে ক্লিক ইভেন্টগুলি যেমন ম্যাটেরিয়ালাইজ সহ SELECT ইস্যুগুলিতে চলছে। @ ট্যারাজাবুরো আপনি কী দিয়ে শেষ করেছেন? বুটস্ট্র্যাপে ফিরবেন?

— শান হে

@ সিয়ানো আপাতত, হ্যাঁ

আমি আমার বেশিরভাগ ওয়েব পৃষ্ঠাগুলি এবং ফর্মগুলিকে রূপায়িত করতে যথেষ্ট সময় ব্যয় করেছি, তবে এখন কীভাবে নির্বাচিত সমস্যাটি সমাধান করা যায় তাতে আটকা পড়েছি। এটি সত্যিই খারাপ, মেটেরিয়ালসেস্কের বিশাল ট্র্যাফিক রয়েছে তবে এখনও এই ছোটখাটো সমস্যাটি সমাধান হয় না। আপনি যদি কিছু ভোক্তা পণ্যের জন্য এটি ব্যবহার করার জন্য মূল্যায়ন করেন তবে এটি পরিপক্ক হওয়া পর্যন্ত অপেক্ষা করুন

— আসিফ শাহজাদ

আপনি ব্যবহার করতে পারেন <select class="browser-default">এবং আপনাকে জেএস দিয়ে আরম্ভ করতে হবে না এবং আপনার এমন নেটিভ ইউআই পাবেন যা ব্যবহারকারী অভ্যস্ত। নেটিভাল ইউআই ব্যবহার না করে এমন কোনও বাস্তবায়নের জন্য জেএস সূচনাকরণের প্রয়োজন হবে।

— শ্বেওডগ

Answer 3

@ লিটলগাই 23 এটি সঠিক, তবে আপনি এটি মাল্টি সিলেক্ট করতে চান না। কোডে কেবলমাত্র একটি ছোট পরিবর্তন:

$(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 ব্যবহার করে থাকেন তবে আপনি কৌণিক- উপাদানযুক্ত প্লাগইন ব্যবহার করতে পারেন যা কিছু সহজ নির্দেশনা সরবরাহ করে। তারপরে আপনার জেএস শুরু করতে হবে না, কেবল 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

আমার জন্য যে সমাধানটি কাজ করেছিল তা হ'ল বিকল্পগুলি ডেটা লোড হওয়ার পরে 'ম্যাটারিয়াল সিলেক্ট' ফাংশনটি কল করে। যদি আপনি কনসোলটিতে অপশনলিস্ট.ফাইন্ড ()। গণনা () এর মান মুদ্রণ করেন তবে এটি প্রথম 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/>এইচটিএমএল পেশ করা হয়েছে, যা আমি করেছিল dropdown.component.ts। সমাধানটি হ'ল ngOnInit()যে কোনও উপাদানই ড্রপডাউনগুলি ব্যবহার করে তার মধ্যে থেকে এটি কল করে ।

— লেভি ফুলার

Answer 8

আমার জন্য অন্য উত্তরগুলির কোনওটিই কাজ করেনি কারণ আমি ম্যাটারিয়ালসিসিএসএস এবং মেটিয়ারের সর্বশেষতম সংস্করণটি ব্যবহার করছি এবং জেকারি সংস্করণগুলির মধ্যে অসম্পূর্ণতা রয়েছে, উল্কা 1.1.10 jquery 1.11 ব্যবহার করে (এই নির্ভরতা ওভাররাইডিং সহজ নয় এবং সম্ভবত উল্কা / ব্লেজটি ভেঙে ফেলবে) এবং jquery 2.2 দিয়ে ম্যাটারিয়ালাইজ টেস্টিং ঠিক কাজ করে। আরও তথ্যের জন্য https://stackoverflow.com/a/34809976/2882279 দেখুন ।

এটি ড্রপডাউনগুলির সাথে একটি জ্ঞাত সমস্যা এবং ম্যাটারিয়াল 0.97.2 এবং 0.97.3 এ নির্বাচন করে; আরও তথ্যের জন্য https://github.com/Dogfalo/matoryize/issues/2265 এবং https://github.com/Dogfalo/matoryize/commit/45feae64410252fe51e56816e664c09d83dc8931 দেখুন ।

আমি উল্কাতে ম্যাটারিয়ালসিসএসএস এর সাস সংস্করণটি ব্যবহার করছি এবং পুরাতন সংস্করণকে বলপূর্বক বলার জন্য আমার উল্কা প্যাকেজ ফাইলে কাব্যিক: ম্যাটেরাইজড-এসএসএস@1.97.1 ব্যবহার করে সমস্যাটি সমাধান করেছি। ড্রপডাউনগুলি এখন কাজ করে, পুরানো jquery এবং সব!

Answer 9

এইচটিএমএল রেন্ডার হওয়ার পরেই ম্যাটারিয়াল সিএসএস জ্যাকোয়ারি কোডটি কল করুন। সুতরাং আপনি একটি নিয়ামক রাখতে পারেন এবং তারপরে একটি পরিষেবা ফায়ার করতে পারেন যা নিয়ামকটিতে jquery কোড কল করে। এটি সিলেক্ট বাটনটি রেন্ডার করবে। আপনি যদি কখন এনজিচঞ্জ বা এনজিএসটি ব্যবহার করার চেষ্টা করেন তবে এটি নির্বাচিত ট্যাগটির গতিশীল স্টাইলিংয়ের কারণে কাজ নাও করতে পারে।

Answer 10

এটি কেবল আমার জন্য কাজ করেছে:

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

Answer 11

আমি নিজেকে এমন পরিস্থিতিতে পেয়েছি যেখানে সমাধানটি নির্বাচিত ব্যবহার করে using

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

যে কোনও কারণেই ত্রুটি ছুঁড়ে মারছিল কারণ ম্যাটারিয়াল সিলেক্ট () ফাংশনটি খুঁজে পাওয়া যায়নি। কেবল এটি বলা সম্ভব হয়নি <select class="browser-default... কারণ আমি এমন একটি কাঠামো ব্যবহার করছি যা ফর্মগুলি স্বয়ংক্রিয়ভাবে রেন্ডার করে। সুতরাং আমার সমাধানটি ছিল জেএস (জ্যাকুয়ারি) ব্যবহার করে ক্লাস যুক্ত করা

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

Answer 12

প্রথমে নিশ্চিত হয়ে নিন যে আপনি এটি নথিতে সূচনা করেছেন this এর মতো প্রস্তুত:

$(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 এ রয়েছে এবং আপনার এখনও জাভাস্ক্রিপ্টের সাহায্যে নির্বাচনগুলি শুরু করতে হবে।

— পাবলো ফার্নান্দেজ

0.100.2: নির্বাচনগুলি আরম্ভ করার প্রয়োজন। এই উত্তরটি কখনও সঠিক ছিল এমন কোনও প্রমাণ নেই।

— জেজেজে