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;
}
Related
in my form i have one checkbox so when i check the checkbox it should show password entered in password field.i am doing it using angular 7.
<div class="form-group">
<label for="Password" class="control-label">Password</label>
<div>
<input type="password" class="form-control" name="Password" ngModel
#pwd="ngModel" placeholder="Password" required pattern="^(?=.*[a-z])(?
=.*
[A-Z])(?=.*\d)(?=.*[#$!%*?&])[A-Za-z\d#$!%*?&]{8,}$">
<div *ngIf= pwd.invalid>
<small class="form-text text-danger" *ngIf=
pwd.errors.required>Password Required</small>
<small class="form-text text-danger"
*ngIf=pwd.errors.pattern>Minimum eight characters, at least one
uppercase letter, one lowercase letter, one number and one special
character.</small>
</div>
</div>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input"
[disabled]="pwd.invalid">
<label class="form-check-label" id="show" for="exampleCheck1">Show
Password</label>
</div>
By checking the checkbox it should show password entered in the password field.
Hi and welcome on Stackoverflow!
Try to switch between type="password" and type="text" based on checkbox value.
Add #showPassword to your checkbox input, like that :
<input #showPassword type="checkbox" class="form-check-input" [disabled]="pwd.invalid">
Then on your password field :
<input type="showPassword.checked ? 'text' : 'password'" .... />
EDIT (in case you did not solve it yet, and for others) :
component.ts
// show/hide boolean variable
showPassword: boolean;
constructor() {
// init value in constructor
this.showPassword = false;
}
// click event, show/hide based on checkbox value
showHidePassword(e) {
this.showPassword = e.target.checked;
}
component.html
<input [type]="showPassword ? 'text' : 'password'" />
<input type="checkbox" (change)="showHidePassword($event)" > toggle view
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.
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
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