Как применить класс CSS к Select, используя Materialize и SimpleForm в Rail 5 - PullRequest
Новая
       6

Как применить класс CSS к Select, используя Materialize и SimpleForm в Rail 5

0 голосов
/ 05 октября 2018

У меня возникли проблемы с тем, чтобы заставить класс застрять в нужном месте, используя SimpleForm и Materialize с входами Select.

Оболочки простых форм Materialise из этого драгоценного камня (https://github.com/jamesfwz/materialize-form) отлично работают для большинства полей, но если я хочу, чтобы поле загружалось с классом Invalid для поля Select, я не могу сделать это правильно.

Вот рабочий пример, скажем, с текстовым полем. На мой взгляд: 

<%= f.input :suburb,  input_html: {class: "invalid"} %>

Вывод: 

<div class="input-field col string optional">
  <input class="string optional invalid" type="text" ....>Suburb</label></div>

, который правильно отображается с неправильным форматированием.

Когда я пытаюсь сделать это с выбранным вводом, я не могу получить класс в нужном месте, т. Е. Связанный с ним текстовый ввод Materialise, который он создает, используя js.

Использование опции wrapper_html в моем представлении: 

<%= f.input :state,              
        collection: ["VIC","NSW","TAS","SA","ACT","WA"], 
        wrapper_html: { class: 'invalid' }

, который помещает класс во внешнюю оболочку, но не в видимый текстовый элемент: 

<div class="input-field col select optional invalid">
  <div class="select-wrapper">
    <input class="select-dropdown dropdown-trigger" type="text" readonly="true">
      <ul id="select-..." class="dropdown-content select-dropdown" tabindex="0">
        <li id="select-options-..." tabindex="0" class="selected"><span>

, который не отображается правильно.

Я пробовалопция input_html; 

<%= f.input :state,              
        collection: ["VIC","NSW","TAS","SA","ACT","WA"], 
        input_html: { class: 'invalid' }

, которая помещает класс в элемент Select, но не в видимый текстовый элемент 

<div class="input-field col select optional ">
  <div class="select-wrapper">
    <input class="select-dropdown dropdown-trigger" type="text" readonly="true">
       <ul id="select-options-..." class="dropdown-content select-dropdown" tabindex="0">
         <li ...</li></ul>
           <select class="select optional invalid" name="...">
             <option value=""></option>

я пробовал использовать прямой класс; 

<%= f.input :state,              
        collection: ["VIC","NSW","TAS","SA","ACT","WA"], 
        class: 'invalid'

Который без класса появляется нигде (неудивительно)

Наконец, я попробовал параметр html_options, надеясь, что он будет передан методу collection_select и найден Materialize 

<%= f.input :state,              
        collection: ["VIC","NSW","TAS","SA","ACT","WA"], 
        class: 'invalid'

У которого нигде нет этого класса (что еще более удивительно!)

Что я не так делаю?

1 Ответ

0 голосов
/ 07 октября 2018

Вы можете использовать option_for_select 

invalid_value = "NSW"
values = ["VIC","NSW","TAS","SA","ACT","WA"].map { |v| v == invalid_value ? [v, class: 'invalid'] : v  }
=> ["VIC", ["NSW", {:class=>"invalid"}], "TAS", "SA", "ACT", "WA"]

, затем 

<%= f.select :state, options_for_select(values, invalid_value), include_blank: true %>

Редактировать:

Чтобы добавить класс в Материализованный сгенерированный выберите

<%= form.input :state, collection:  ["VIC","NSW","TAS","SA","ACT","WA"], input_html: { class: "invalid" } %>

Добавить добавить немного JS
Это должно работать после того, как сгенерирован ниспадающий список Materialise 

$('select.invalid').each(function(){
  $(this).parent().addClass('invalid')
})
...