Материализовать выбор ввода показывает два курсора

Я только что интегрировал Materialize в свой проект Rails через файл gem 'materialize-sass'. По какой-то причине при выборе ввода отображаются два знака вставки вместо 1.

введите здесь описание изображения

Код для выбора ввода в основном является ответвлением примера на их веб-сайте.

<div class="input-field">
    <select name="tutor_profile[dob_month]" id="tutor_profile_dob_month">
        <option value="" disabled selected>Choose your month</option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
    <label>Birthday</label>
</div>

Я безуспешно пытался настроить стиль CSS для кнопки выбора в консоли разработчиков. Никаких дополнительных стилей для любого из элементов в выбранном вводе нет.

Другие CSS-фреймворки, которые я использую, — это bootstrap, bootstrap-tagsinput, twitter-typeahead и jquery-ui. Мне было интересно, есть ли у кого-то опыт чего-то подобного.


ruby-on-rails materialize
person Richard    schedule 15.01.2016    source источник

Ответы (4)


arrow_upward
9
arrow_downward

Короткий ответ:

Добавьте это в свой css

.caret {
  border-color: transparent !important;
}

Длинный ответ:

Bootstrap реализует каретку, используя границы css (справа, сверху, слева), а materializecss реализует каретку, используя текст «▼» в качестве внутреннего html элемента.

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

Если вы настаиваете на использовании каретки bootstrap, вам придется отредактировать файлы javascript materializecss, что не рекомендуется.

person Ofer Segev    schedule 28.07.2016

arrow_upward
0
arrow_downward

У меня точно такая же проблема. Причина в том, что мы комбинируем bootstrap и materializecss fm, если вы выгрузите один из них, он будет работать правильно. Но решение для них работает вместе, я не знаю =(

person user3711881    schedule 04.02.2016
comment
Жаль, что оба они не совместимы друг с другом, поскольку было бы сложно изменить все стили от бутстрапа до материализации. - person Richard; 05.02.2016

arrow_upward
0
arrow_downward

Это не лучший ответ. Но я сделал это с JQuery. Я прочитал html, сгенерированный в консоли, и заметил, что эти стрелки находятся в одном $(".caret").hide() Попробуйте!

person Carlos Melgoza Gutiérrez    schedule 21.06.2016
comment
находятся в одном ‹span class=caret›‹/span› - person Carlos Melgoza Gutiérrez; 21.06.2016
comment
И вы можете использовать эту строку только в том случае, если вы НЕ используете что-то большее, например выпадающие меню :( - person Carlos Melgoza Gutiérrez; 21.06.2016

arrow_upward
0
arrow_downward

Удалите предыдущий диапазон с классом вставки перед выполнением material_select, это перезапустит тег select в materializecss:

$(".caret").remove();
$('select').material_select();
person Igor Bezerra    schedule 29.08.2020