I have the following code:
<%= f.collection_radio_buttons :access_type_id, AccessType.all, :id, :name, group_label_method: 'Access type' %>
and it gives me:
using the following HTML:
<fieldset>
...
<span>
<label for="log_file_access_type_id_1" name="log_file[access_type_id]">
<input id="log_file_access_type_id_1" name="log_file[access_type_id]" type="radio" value="1">
<label class="collection_radio_buttons" for="log_file_access_type_id_1">
public
</label>
</label>
</span>
<span>
<label for="log_file_access_type_id_2" name="log_file[access_type_id]">
<input id="log_file_access_type_id_2" name="log_file[access_type_id]" type="radio" value="2">
<label class="collection_radio_buttons" for="log_file_access_type_id_2">
protected
</label>
</label>
</span>
<span>
<label for="log_file_access_type_id_3" name="log_file[access_type_id]">
<input id="log_file_access_type_id_3" name="log_file[access_type_id]" type="radio" value="3">
<label class="collection_radio_buttons" for="log_file_access_type_id_3">
private
</label>
</label>
</span>
...
</fieldset>
I want to add label for the radio buttons group. I have try using group_label_method: 'Access type' but nothing changed.
Is there a way to add such label using simple_form methods or I should just added as plain HTML?
try this
simple form http://rubydoc.info/github/plataformatec/simple_form/SimpleForm/FormBuilder:collection_radio_buttons
collection_radio_buttons(:access_type_id, AccessType.all, :id, :name_with_initial) do |b|
b.label(:"data-value" => b.value) { b.radio_button + b.text }
end
Related
I have the following simple_form builder invocation:
f.association(:facility, { as: :radio_buttons, label: false })
Which generates:
<div class="attribute radio_buttons required swipe_facility">
<ul>
<input type="hidden" name="swipe[facility_id]" value="">
<li class="radio">
<input class="radio_buttons required" type="radio" value="10000" name="swipe[facility_id]" id="swipe_facility_id_10000">
<label class="collection_radio_buttons" for="swipe_facility_id_10000">Facility 1</label>
</li>
<li class="radio">
<input class="radio_buttons required" type="radio" value="10001" name="swipe[facility_id]" id="swipe_facility_id_10001">
<label class="collection_radio_buttons" for="swipe_facility_id_10001">Facility 2</label>
</li>
<li class="radio">
<input class="radio_buttons required" type="radio" value="10002" name="swipe[facility_id]" id="swipe_facility_id_10002">
<label class="collection_radio_buttons" for="swipe_facility_id_10002">Facility 3</label>
</li>
</ul>
</div>
How do I add a class to these guys:
<label class="collection_radio_buttons" for="swipe_facility_id_10000">Facility 1</label>
The closest I've been able to get is adding a class to the LI tags with item_wrapper_class.
Using Simple Form & Bootstrap, is there a way to add a class on span class="radio" ? (with custom wrapper or wrapper_html ? ). I aim at putting all radio buttons inline (but not the main label 'Vous êtes').
Goal =
Vous êtes :
() Homme () Femme
here is the code (haml) in my view :
= simple_form_for #user do |f|
= f.input :gender, as: :radio_buttons, collection: [["Homme", 0], ["Femme", 1]]
here is the html generated code :
<div class="form-group radio_buttons required user_gender">
<label class="control-label radio_buttons required">
Vous êtes :
</label>
<input type="hidden" name="user[gender]" value="">
<span class="radio">
<label for="user_gender_0">
<input class="radio_buttons required" type="radio" value="0" checked="checked" name="user[gender]" id="user_gender_0">
Homme
</label>
</span>
<span class="radio">
<label for="user_gender_1">
<input class="radio_buttons required" type="radio" value="1" name="user[gender]" id="user_gender_1">
Femme
</label>
</span>
</div>
If I understand what you are looking for correctly, can't you just use 'display block' in your CSS? or simply wrap your main label within it's own containment div.
.control-label {
display: block;
}
So I have a html filter box which looks like this:
<label for="datefrom">Date From:</label>
<input type="date" id="datefrom" class="form-control" name="date" value="dd/mm/yyyy">
<label for="dateto">Date To:</label>
<input type="date" id="dateto" class="form-control" name="date" value="dd/mm/yyyy">
<hr>
<div class="radio">
<label><input type="radio" checked name="optradio">All</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">opt1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">opt2</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">opt3</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">opt4</label>
</div>
<div style="float:right">
<button class="btn btn-info" name="button">Apply Filters</button>
</div>
Now I have an each statement that looks like this
<% #events.each do |event|%>
<div class='positive'>
<div class='icon'></div>
<div class='message'><%= event.eventname %></div>
<div class='date'><%= event.date %> <%= event.time %></div>
<%= link_to 'Compare', event_path(event.id), class: "button ok" %>
</div>
<% end %>
So the each returns around 200 events, What I want is for the date from and date to be a range filter that will get every event inside a range of dates defined in the filter
So if 3 events have dates like
22/01/2016
23/01/2016
25/01/2016
And if the date range was submitted at 21/01/2016 to 23/01/2016 then the 22/01/2016 and the 23/01/2016 would show but the rest wouldn't.
Thanks for any help!
Edit
Heres the controller:
def search
#events = Event.page(params[:page]).per(10).search params[:search], suggest: true, misspellings: { distance: 1 }, order: { date: :asc, eventname: :asc }, match: :word_start
if #events.results.any?
render 'events/results'
else
render 'events/noresults'
end
end
Sam
In your controller, you'll get the dateFrom and the dateTo in the params.
From there, your can filter your events with something like so:
#events = Event.where(date: #date_from..#date_to)
You can then display your stuff as you do now in the views.
This:
<%= f.input :accomplished_goal, label: "Accomplished goal this week?", collection: ["Yes", "No"], as: :check_boxes, label_html: { class: 'checkbox inline' } %>
Produces:
<div class="control-group check_boxes optional weekly_entry_accomplished_goal">
<label class="check_boxes optional control-label checkbox inline">Accomplished goal this week?</label>
<div class="controls">
<label class="checkbox">
<input class="check_boxes optional" id="weekly_entry_accomplished_goal_yes" name="weekly_entry[accomplished_goal][]" type="checkbox" value="Yes" />
Yes
</label>
<label class="checkbox">
<input class="check_boxes optional" id="weekly_entry_accomplished_goal_no" name="weekly_entry[accomplished_goal][]" type="checkbox" value="No" />
No
</label>
<input name="weekly_entry[accomplished_goal][]" type="hidden" value="" />
</div>
</div>
Ideally, I would like to add the style inline to the inner label class="checkbox"
How do I do that?
This is what I found works:
<%= f.input :accomplished_goal, label: "Accomplished goal this week?", collection: ["Yes", "No"], as: :check_boxes, item_wrapper_class: 'inline' %>
i.e. using the attribute item_wrapper_class: 'inline'
Adds the class inline to the internal <label class="checkbox inline">
Using this code:
- #contacts.each do |contact|
= label_tag "contact[#{contact.id}]", contact.slug
= check_box_tag "contact[#{contact.id}]", contact.id
.clear
Results in:
<label for="contact_1">Avalon3323</label>
<input id="contact_1" name="contact[1]" type="checkbox" value="1" />
<div class='clear'></div>
<label for="contact_2">doutzen</label>
<input id="contact_2" name="contact[2]" type="checkbox" value="2" />
<div class='clear'></div>
<label for="contact_3">jannie6674</label>
Which seems okay according to the documentation.
Still the label is positioned before the checkbox.
Does one have to fix this with CSS? Shouldn't the html order be correctly by itself?
have you tried to swap code?
= check_box_tag "contact[#{contact.id}]", contact.id
= label_tag "contact[#{contact.id}]", contact.slug