CSS 구체화-선택이 렌더링되지 않는 것으로 선택

CSS 구체화-선택이 렌더링되지 않는 것으로 선택

---

나는 현재 materialize CSS로 작업하고 있으며 선택 필드에 걸리는 것 같습니다.

나는 그들의 사이트에서 제공된 예제를 사용하고 있지만 불행히도 뷰에서 렌더링됩니다. 다른 사람이 도울 수 있는지 궁금합니다.

내가하려고하는 것은 패딩을 제공하는 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>

---

브라우저 기본 설정을 대체하므로 선택 스타일링을 실행하려면 Javascript가 필요합니다. Materialise Javascript 파일을 포함시켜야합니다.

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

해당 파일을로드 한 후

---

selectCSS를 구체화 하는 기능 설계는 CSS를 사용하지 않는 아주 좋은 이유입니다.

material_select()@ littleguy23에서 언급했듯이으로 select 요소를 초기화 해야합니다. 그렇지 않으면 선택 상자가 표시되지 않습니다! 구식 jQuery 앱에서는 문서 준비 기능에서 초기화 할 수 있습니다. 요즘 나와 다른 많은 사람들이 jQuery를 사용하지 않거나 문서 준비 후크에서 앱을 초기화하지 않는 것을 추측하십시오.

동적으로 생성됨을 선택합니다 . Ember와 같은 프레임 워크에서 발생하는 것과 같이 선택을 동적으로 생성하면 즉시 뷰를 생성하는 경우 어떻게됩니까? 뷰가 생성 될 때마다 선택 상자를 초기화하려면 각 뷰에 논리를 추가하거나 뷰 믹스 인을 작성하여 처리하십시오. 그리고 그보다 더 나쁩니다 :보기가 생성되고 Ember 용어 didInsertElement로 호출 될 때 선택 상자의 옵션 목록에 대한 바인딩이 아직 해결되지 않았을 수 있으므로 옵션 목록을 관찰 할 때까지 기다리는 특별한 논리가 필요합니다 에 전화하기 전에 채워졌습니다 material_select. 옵션이 변경 되더라도 쉽게 알 수 material_select없으며 드롭 다운을 업데이트하지 않습니다. material_select옵션이 변경되면 다시 전화를 걸 수 있지만 아무것도하지 않는 것처럼 보입니다 (무시 됨).

다시 말해 CSS의 선택 상자를 구체화하는 설계 가정은 모두 페이지로드시 존재하며 그 값은 변하지 않는다는 것입니다.

구현 . 미적 관점에서 볼 때, Materialise CSS가 드롭 다운을 구현하는 방식을 선호하지 않습니다. 이는 DOM의 다른 곳에 평행 한 그림자 요소 세트를 만드는 것입니다. 물론, select2와 같은 대안은 동일한 작업을 수행하며 시각적 효과 중 일부 (실제로?)를 달성 할 수있는 다른 방법이 없을 수도 있습니다. 그러나 요소를 검사 할 때 누군가가 마술처럼 만든 그림자 버전이 아닌 요소를보고 싶습니다.

Ember가 뷰를 분해 할 때 CSS를 구체화하여 생성 한 그림자 요소를 분해하는지 확실하지 않습니다. 사실, 나는 그것이 매우 놀라 울 것입니다. 내 이론이 맞다면, 뷰가 생성되고 찢어지면 DOM은 아무 것도 연결되지 않은 수십 개의 섀도 드롭 다운으로 오염됩니다. 이는 Ember뿐만 아니라 다른 MVC / 템플릿 기반 OPA 프런트 엔드 프레임 워크에도 적용됩니다.

바인딩 . 또한 대화 상자에서 선택한 값을 가져 와서 {{view 'Ember.Select' value=country}}형식 인터페이스를 통해 선택 상자를 호출하는 Ember와 같은 프레임 워크에서 유용한 항목에 바인딩하는 방법을 알 수 없었습니다 . 즉, 무언가를 선택하면 country업데이트되지 않습니다. 이것은 거래 차단기입니다.

파도 . 그런데 같은 문제가 버튼의 "파도"효과에도 적용됩니다. 버튼을 만들 때마다 초기화해야합니다. 나는 개인적으로 파동 효과에 신경 쓰지 않고 모든 소란이 무엇인지 이해하지 못하지만 파동을 원한다면 나머지 삶의 많은 부분을 어떻게 해야할지 걱정할 것입니다. 버튼 하나가 생성 될 때마다 초기화합니다.

Materialise CSS guys의 노력에 감사 드리며 거기에는 멋진 시각 효과가 있지만 너무 커서 크고 위와 같은 것들이 너무 많아서 사용할 것입니다. 이제 내 앱에서 CSS를 구체화하고 Bootstrap 또는 Suit CSS 상단의 레이어로 돌아갈 계획입니다. 당신의 도구는 당신의 인생을 더 어렵게 만들지 말아야합니다.

---

@ littleguy23 맞습니다. 그러나 다중 선택을 원하지 않습니다. 따라서 코드를 약간만 변경하면됩니다.

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

---

나를 위해 일한 해결책은 옵션 데이터가로드 된 후 'material_select'기능을 호출하는 것입니다. OptionsList.find (). count () 값을 콘솔에 출력하면 처음 0이되고 몇 밀리 초 후에 목록이 데이터로 채워집니다.

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

};

---

Angularjs를 사용하는 경우 편리한 지시어를 제공 하는 angular-materialize 플러그인을 사용할 수 있습니다 . 그런 다음 js에서 초기화 할 필요가 없으며 material-selectselect에 추가 하십시오.

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

---

이것도 작동합니다 : class = "browser-default"

---

최신 버전의 MaterializeCSS와 Meteor를 사용하고 있으며 jquery 버전 사이에 호환되지 않기 때문에 Meteor 1.1.10은 jquery 1.11을 사용하기 때문에 다른 답변은 효과가 없었습니다 (이 종속성을 재정의하는 것은 쉽지 않으며 아마도 Meteor / Blaze를 중단합니다) jquery 2.2로 Materialise를 테스트하면 정상적으로 작동합니다. 자세한 내용은 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을 참조하십시오 .

Meteor에서 Sass 버전의 MaterializeCSS를 사용하고 있으며 유성 패키지 파일에서 poetic : materialize-scss@1.97.1을 사용하여 이전 버전을 강제 실행하여 문제를 해결했습니다. 드롭 다운은 이제 오래된 jquery와 모두 작동합니다!

---

html이 렌더링 된 후에 만 ​​materialize css jquery 코드를 호출하십시오. 따라서 컨트롤러를 가지고 컨트롤러의 jquery 코드를 호출하는 서비스를 실행할 수 있습니다. 선택 버튼을 올바로 렌더링합니다. 그러나 ngChange 또는 ngSubmit을 사용하려고하면 select 태그의 동적 스타일로 인해 작동하지 않을 수 있습니다.

---

이것 만이 나를 위해 일했습니다 :

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

---

이것은 입력 클래스가있는 jquery 또는 select 래퍼가 없으며 material.js 와이 바닐라 js에서 저에게 효과적이었습니다.

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

알 수 있듯이 브라우저 기본값이 아닌 materialize CSS 실제 스타일을 얻었습니다.

---

선택한 솔루션을 사용하는 상황에서 자신을 발견했습니다.

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

for whatever reason was throwing errors because the material_select() function could not be found. It was not possible to just say <select class="browser-default... Because I was using a framework which auto-rendered the the forms. So my solution was to add the class using js(Jquery)

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

---

First, make sure you initialize it in document.ready like this:

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

Then, populate it with your data in the way you want. My example:

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

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

Make sure after you are done with the population, to trigger this contentChanged like this:

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

---

For default browser,

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

Or the Jquery solution after the link t Jquery library and your local/CDN materialize files

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

I really like this framework, but what on earth to have display:none...

---

Just to follow up on this since the top answer recommends not using materializecss... in the current version of materialize you no longer need to initialize selects.

참고URL : https://stackoverflow.com/questions/28258106/materialize-css-select-doesnt-seem-to-render