[Rails] Si CSS n'est pas appliqué dans collection_select, vérifiez si vous pouvez spécifier la classe.

introduction

――Nous allons résumer ce que nous avons découvert dans le développement de l'application originale dans un souci de correction et de rappels.

Conclusion

--Si vous devriez être capable d'écrire du CSS mais qu'il n'y a pas de changement, vérifiez ce qui suit

• Le nom de la classe est-il correct? -La description est-elle affichée sur l'outil de développement? --Ajoutez {} à l'option et aux attributs HTML de collection_select

Contexte

Chose que tu veux faire

--Je veux styliser la boîte de sélection créée avec collection_select

Code créé (faux)

#fichier erb
<div class="search-field">
  <%= f.label :occupation_id, "Occupation", class:"search-label" %>
  <%= f.collection_select(:occupation_id, Occupation.all, :id, :name, selected: @search_params[:occupation_id], include_blank: "Ne sélectionnez pas", class:"search-occupation") %>
</div>

Une partie du formulaire de recherche vous permet de sélectionner dans le modèle «occupation». Veuillez consulter le guide pour l'utilisation spécifique de collection_select → document Rails

Les éléments suivants sont spécifiés comme options. ・ Sélectionné: → La valeur de @ search_params est sélectionnée après la transition. -Include_blank: → La valeur de l'état initial (état non sélectionné) est spécifiée.

Un problème est survenu aux endroits suivants: J'ai écrit le CSS suivant pour class: search-occupation sur la 3ème ligne, mais il n'a pas été appliqué.

#fichier scss
.search-occupation {
    width: 100%;
    padding: 8px 8px 5px;
    outline: none;
}

Quand j'ai vérifié avec l'outil de développement, j'ai trouvé que class:" search-occupation " ne pouvait pas être spécifié. (3e ligne de l'image)

Cela signifie que CSS est désactivé car la classe ne peut pas être spécifiée en HTML. J'ai renvoyé à l'article suivant pour la correspondance. ActionView::Helpers::FormOptionsHelper [Rails] Comment utiliser select pour créer une boîte de sélection avec un formulaire de compréhension complet Définir la classe dans f.select dans les rails

Cette correspondance

En recherchant collection_select, j'ai trouvé que ** option et attribut HTML nécessitent {} **. (Dans le code ci-dessus, la partie après l'argument : name) De plus, s'il y a deux ** options comme cette fois, elles doivent être écrites dans la même {} **.

• OK { selected: 〇〇, include_blank: 〇〇} --NG {sélectionné: 〇〇}, {include_blank: 〇〇} → ArgumentError

Code modifié

Correction de la 3ème ligne

<div class="search-field">
  <%= f.label :occupation_id, "Occupation", class:"search-label" %>
  <%= f.collection_select(:occupation_id, Occupation.all, :id, :name, {selected: @search_params[:occupation_id], include_blank: "Ne sélectionnez pas"}, {class:"search-occupation"}) %>
</div>

en conclusion

―― Puisque l'assistant a de nombreux arguments, j'ai pu le résoudre en douceur en vérifiant calmement les règles. ――Pour la fonction de recherche d'origine, j'ai fait référence à cet article. ――Parce que vous êtes débutant, il peut y avoir une erreur dans l'article. Si vous avez des suggestions, nous vous serions reconnaissants de bien vouloir commenter.