[Rails] Wenn CSS in collection_select nicht angewendet wird, prüfen Sie, ob Sie die Klasse angeben können.

Einführung

――Wir werden zusammenfassen, was wir bei der Entwicklung der ursprünglichen App entdeckt haben, um Korrekturen und Erinnerungen vorzunehmen.

Fazit

• Wenn Sie in der Lage sein sollten, CSS zu schreiben, sich aber nichts ändert, überprüfen Sie Folgendes
• Ist der Klassenname korrekt?
• Wird die Beschreibung im Entwicklungstool angezeigt?
• Fügen Sie "{}" zu den Options- und HTML-Attributen von "collection_select" hinzu

Hintergrund

Was du machen willst

• Ich möchte das mit collection_select erstellte Auswahlfeld formatieren

Code erstellt (falsch)

#erb Datei
<div class="search-field">
  <%= f.label :occupation_id, "Besetzung", class:"search-label" %>
  <%= f.collection_select(:occupation_id, Occupation.all, :id, :name, selected: @search_params[:occupation_id], include_blank: "Nicht auswählen", class:"search-occupation") %>
</div>

In einem Teil des Suchformulars können Sie aus dem Berufsmodell auswählen. Bitte überprüfen Sie die Anleitung für die spezifische Verwendung von collection_select → Rails-Dokument.

Die folgenden Optionen sind als Optionen angegeben. ・ Ausgewählt: → Der Wert von @ search_params wird nach dem Übergang ausgewählt. -Include_blank: → Der Wert des Anfangszustands (nicht ausgewählter Zustand) wird angegeben.

An folgenden Stellen ist ein Problem aufgetreten: Ich habe das folgende CSS für "Klasse: Suchberuf" in der 3. Zeile geschrieben, aber es wurde nicht angewendet.

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

Als ich mich mit dem Entwicklungstool erkundigte, stellte ich fest, dass class:" search-Occupation " nicht angegeben werden konnte. (3. Bildzeile)

Dies bedeutet, dass CSS deaktiviert ist, da die Klasse nicht in HTML angegeben werden kann. Für die Korrespondenz habe ich auf den folgenden Artikel verwiesen. ActionView::Helpers::FormOptionsHelper [Rails] Verwendung von select zum Erstellen eines Auswahlfelds mit einem vollständigen Verständnisformular Klasse in f.select in Rails festlegen

Diese Korrespondenz

Bei der Untersuchung von "collection_select" habe ich festgestellt, dass "Option" und "HTML-Attribut" {} "** erfordern. (Im obigen Code der Teil nach dem Argument : name) Wenn es zwei ** Optionen wie diese gibt, müssen sie in derselben {} ** geschrieben werden.

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

Geänderter Code

Korrektur der 3. Zeile

<div class="search-field">
  <%= f.label :occupation_id, "Besetzung", class:"search-label" %>
  <%= f.collection_select(:occupation_id, Occupation.all, :id, :name, {selected: @search_params[:occupation_id], include_blank: "Nicht auswählen"}, {class:"search-occupation"}) %>
</div>

abschließend

――Da der Helfer viele Argumente hat, konnte ich es reibungslos lösen, indem ich die Regeln ruhig überprüfte. ――Für die ursprüngliche Suchfunktion habe ich auf [diesen Artikel] verwiesen (https://qiita.com/shin1rok/items/779e581e9d12a92310c3). ――Wenn Sie ein Anfänger sind, kann der Artikel einen Fehler enthalten. Wenn Sie Vorschläge haben, würden wir uns freuen, wenn Sie einen Kommentar abgeben könnten.