Материализовать модальное css не работает

Я работаю с Materialise CSS и использую складной элемент в стиле аккордеона ( http://materializecss.com/collapsible.html ).

По какой-то причине я не смог ничего выбрать после 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>

JS

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

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

Я нашел еще один пост с той же проблемой. https://github.com/Dogfalo/materialize/issues/2436


javascript html jquery css materialize
person Dennis Lee    schedule 07.12.2015    source источник
comment
Так, эм... где твой складной? Какое отношение он имеет к этому окну выбора?   -  person AVAVT    schedule 07.12.2015
comment
Извини, я виноват. Это было внутри модального не callapsable   -  person Dennis Lee    schedule 07.12.2015
comment
Если бы вы могли воспроизвести свою проблему на jsfiddle или что-то в этом роде, чтобы люди могли с ней повозиться, было бы лучше. HTML-код, который вы вставили, совершенно нормальный и мало что говорит о проблеме. Непреднамеренное поведение, скорее всего, связано с другими частями документа.   -  person AVAVT    schedule 07.12.2015
comment
Спасибо за ответ. В настоящее время я воспроизвожу свою проблему на jsfiddle. Вернется к вам.   -  person Dennis Lee    schedule 07.12.2015
comment
Привет. Вот ссылка на jsfiddle. Спасибо jsfiddle.net/8rmjymtr/5   -  person Dennis Lee    schedule 07.12.2015
comment
Интересно. Я просто сообщу, что я нашел здесь: ошибка не связана с индексом выбранной опции, а возникает при прокрутке списка. Так что пока вы не прокручиваете, все будет в порядке. Ищем способ исправить это. Похоже на ошибку самой библиотеки...   -  person AVAVT    schedule 07.12.2015
comment
Хорошо, я могу подтвердить, что это проблема библиотеки. Удалось воспроизвести ошибку на самом сайте библиотеки. Вы можете сообщить об ошибке разработчику: github.com/Dogfalo/materialize/issues. К сожалению, у меня недостаточно инструментов для более глубокого изучения этого ноутбука.   -  person AVAVT    schedule 07.12.2015
comment
Спасибо большое за вашу помощь. Я сообщу об ошибке разработчику. Спасибо   -  person Dennis Lee    schedule 07.12.2015
comment
Поскольку этот комментарий решил вопрос, не лучше ли повторить его еще раз в качестве ответа, чтобы он больше не отображался как нерешенный?   -  person print x div 0    schedule 26.01.2016
comment
Я только что посмотрел файл JSFiddle. Для меня это работает нормально - я могу щелкнуть каждый элемент в раскрывающемся меню, а также выбрать его, щелкнуть вне модального окна, нажать кнопку, чтобы показать его снова, когда он все еще там. Что вы пытаетесь сделать?   -  person Josh Murray    schedule 31.01.2016

Ответы (2)


arrow_upward
0
arrow_downward

Я только что проверил скрипку. Мне кажется, что проблема в поле выбора. Если вы измените или добавите класс поля выбора в браузер по умолчанию. Скрипка работает нормально.

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

Проблема заключается в том, что параметры поля выбора не регистрируются в DOM, когда модальная высота превышает высоту родительского элемента, что приводит к тому, что параметры, которые изначально не отображаются, не могут быть выбраны... так что даже если мы нажмем на параметры щелчок не зарегистрирован и опция не выбрана.

Чтобы исправить это, вы можете использовать раскрывающийся список вместо поля выбора или использовать окно выбора по умолчанию в браузере. если это нормально.

person damitj07    schedule 19.02.2016

arrow_upward
0
arrow_downward

Похоже на ошибку в Materialise 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>

JS

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

Скрипт: http://jsfiddle.net/8rmjymtr/9/

Отлично работает с обновленной версией materialize. Протестировано локально с помощью Materialize v0.97.5 в последней версии Chrome.

person utkarshmail2052    schedule 01.04.2016