I'm trying to style my form in rails with bootstrap-4. But I'm having issues apply styles to the date_field helper and the select helper.
This is the date field. The class won't apply and throws an error until I take it off.
<div class="form-group row">
<%= form.label :appointment, :class => 'col-md-3 col-form-label text-md-right' %>
<div class="col-md-9">
<%= date_field(:patient, :apointment), :class => 'form-control' %>
</div>
</div>
This is the select helper. The options are appearing outside of the select box.
<div class="form-group row">
<%= form.label :consultationType, :class => "col-md-3 col-form-label text-md-right" %>
<div class="col-md-9">
<select class ="form-control">
<!--Gets all counties from DB -->
<%= form.select :consultationType,
[
"N/A",
"Inhouse-Clinic",
"St.James Hospital - X-Ray",
"Matter Private Dublin - Cardiology",
"Matter Private Cork - Neurology",
"Royal Eye and Ear - Ophthalmology",
"Temple Street - Children"
]
%>
</select>
</div>
</div>
Try to the following
<%= date_field(:patient, :apointment, class: "form-control") %>
Generated HTML
<input class="form-control" type="date" name="patient[apointment]" id="patient_apointment">
And for the select tag, you have declared two times, you can remove the HTML <select>
tag and then add the bootstrap class like this
<%= form.select :consultationType,
[
"N/A",
"Inhouse-Clinic",
"St.James Hospital - X-Ray",
"Matter Private Dublin - Cardiology",
"Matter Private Cork - Neurology",
"Royal Eye and Ear - Ophthalmology",
"Temple Street - Children"
], {}, {class: "form-control"}
%>
Generated HTML like this
<select class="form-control" name="patient[consultationType]" id="model_consultationType"><option value="N/A">N/A</option>
<option value="Inhouse-Clinic">Inhouse-Clinic</option>
<option value="St.James Hospital - X-Ray">St.James Hospital - X-Ray</option>
<option value="Matter Private Dublin - Cardiology">Matter Private Dublin - Cardiology</option>
<option value="Matter Private Cork - Neurology">Matter Private Cork - Neurology</option>
<option value="Royal Eye and Ear - Ophthalmology">Royal Eye and Ear - Ophthalmology</option>
<option value="Temple Street - Children">Temple Street - Children</option>
</select>
For the date_field
move the class inside the brackets:
date_field(:patient, :appointment, class: 'form-control')
And for the select
it is not required to give HTML select tag explicitly. Just doing like this will do the job:
<%= form.select :consultationType, ["N/A", "Inhouse-Clinic", "St.James Hospital - X-Ray", "Matter Private Dublin - Cardiology", "Matter Private Cork - Neurology", "Royal Eye and Ear - Ophthalmology", "Temple Street - Children"], {}, { class: 'form-control' } %>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.