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
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
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.
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
I have rails model article receive_letters:boolean. And I have backbone in my application. In backbone view I have smth like it:
<form id="new-article" name="article">
<div class="field">
<label for="receive_letters">Подписаться на новостную рассылку </label>
<input type="text" name="receive_letters" id="receive_letters" value="<%= receive_letters %>">
</div>
It's working fine. But then I change type from "text" to "checkbox", it have value = null.
What am I doing wrong?
For checkbox, you also need to changed from the value attribute to the checked attribute:
<input type="checkbox" name="receive_letters" id="receive_letters" checked="<%= receive_letters %>">
Fixed it.
Template (new.jst.ejs):
<input type="checkbox" name="receive_letters" id="receive_letters">
View (new_view.js.coffee):
events: {
"click input:checkbox": "check"
}
check: (e) ->
if e.currentTarget.checked == true
e.currentTarget.value = "true"
else
e.currentTarget.value = "false"