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>

브라우저 기본값을 재정의하므로 선택 스타일을 실행하려면 자바 스크립트가 필요합니다. Materialise Javascript 파일을 포함하고 다음을 호출해야합니다.

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

해당 파일을로드 한 후.

selectMaterialise CSS 의 기능 디자인은 제 생각에 CSS를 사용하지 않는 좋은 이유입니다.

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

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

다시 말해, CSS의 선택 상자를 구체화하는 디자인 가정은 페이지로드시 모두 있고 해당 값은 변경되지 않는다는 것입니다.

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

Ember가 뷰를 분해 할 때 materialize CSS가 생성 한 그림자 요소를 분해하는지 확신 할 수 없습니다. 사실 그렇게된다면 상당히 놀랄 것입니다. 내 이론이 맞다면 뷰가 생성되고 해체 될 때 DOM은 아무것도 연결되지 않은 수십 개의 그림자 드롭 다운 세트로 오염 될 것입니다. 이는 Ember뿐만 아니라 다른 MVC / 템플릿 기반 OPA 프런트 엔드 프레임 워크에도 적용됩니다.

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

파도 . 그런데 버튼의 "파도"효과에도 동일한 문제가 적용됩니다. 버튼이 생성 될 때마다 초기화해야합니다. 나는 개인적으로 파동 효과에 대해 신경 쓰지 않고 모든 소란이 무엇인지 이해하지 못하지만 파동을 원한다면 남은 인생의 많은 부분을 방법에 대해 걱정하면서 보낼 것입니다. 버튼이 생성되면 모든 버튼을 초기화합니다.

materialize CSS 직원들의 노력에 감사하고 거기에 멋진 시각 효과가 있지만 너무 커서 위와 같은 문제가 너무 많아서 사용할 수 없습니다. 이제 내 앱에서 구체화 CSS를 추출하고 Bootstrap 또는 Suit CSS 위에있는 레이어로 돌아갈 계획입니다. 도구는 삶을 더 어렵게하는 것이 아니라 더 쉽게 만들 수 있어야합니다.

@ littleguy23 정확하지만 다중 선택을 원하지는 않습니다. 따라서 코드에 약간의 변경이 있습니다.

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

이것은 나를 위해 일했습니다 .jquery 또는 입력 클래스가있는 래퍼 선택, material.js 및이 바닐라 js :

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

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

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

Angularjs를 사용하는 경우 몇 가지 편리한 지시문을 제공 하는 angular-materialize 플러그인을 사용할 수 있습니다 . 그런 다음 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>

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

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

저에게는 MaterializeCSS와 Meteor의 최신 버전을 사용하고 있으며 jquery 버전 사이에 비 호환성이 있기 때문에 다른 답변은 작동하지 않았습니다. Meteor 1.1.10은 jquery 1.11을 사용합니다 (이 종속성을 재정의하는 것은 쉽지 않으며 Meteor / Blaze를 깨뜨릴 것입니다) jquery 2.2로 Materialize를 테스트하면 잘 작동합니다. 자세한 내용은 https://stackoverflow.com/a/34809976/2882279 를 참조 하십시오 .

이것은 드롭 다운과 관련된 알려진 문제이며 materialize 0.97.2 및 0.97.3에서 선택합니다. 자세한 내용은 https://github.com/Dogfalo/materialize/issues/2265 및 https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931을 참조하십시오 .

Meteor에서 MaterializeCSS의 Sass 버전을 사용하고 있으며, 유성 패키지 파일에서 poetic : materialize-scss@1.97.1을 사용하여 이전 버전을 강제로 사용하여 문제를 해결했습니다. 이제 드롭 다운이 작동합니다. 이전 jquery 및 모든 것입니다!

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

이것은 나를 위해 일했습니다.

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

선택한 솔루션을 사용하는 상황에 처했습니다.

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

어떤 이유로 든 material_select () 함수를 찾을 수 없기 때문에 오류가 발생했습니다. <select class="browser-default... 양식을 자동 렌더링하는 프레임 워크를 사용하고 있었기 때문에 말할 수 없었습니다 . 그래서 내 해결책은 js (Jquery)를 사용하여 클래스를 추가하는 것이 었습니다.

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

먼저 다음과 같이 document.ready에서 초기화해야합니다.

$(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');

기본 브라우저의 경우

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

또는 링크 후 Jquery 솔루션 Jquery 라이브러리와 로컬 / CDN 구체화 파일

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

나는이 프레임 워크를 정말 좋아하지만, 도대체 무엇을 보여줄 것인가 : 없음 ...

최상위 답변은 materializecss를 사용하지 않는 것을 권장하기 때문에 후속 조치를 취하십시오. 현재 버전의 materialize에서는 더 이상 선택 항목을 초기화 할 필요가 없습니다.