Try to set a selected value for a integer collection in simple_form always fails! why this is highly frustrating and don't understand why.
printing #profile.age in view it is correctly value 19
View:
= f.input :age_from,
:collection => 18..60,
:selected => #profile.age
Results:
defaults to 18
View:
= f.input :age_from,
:collection => 18..60,
:selected => "#{#profile.age}"
Results:
to defaults to 18
adding :selected => "#{#profile.age.to_s}
Results:
defaults to 18
Related
I have a rails 4 app with simple form and bootstrap.
I have checkbox elements in my form. I want to align the check box to be vertically aligned with the content in other fields. At the moment the check box is further left than the rest of the content in other fields.
For example:
<%= f.input :experiment, :as => :boolean, :label => false, inline_label: 'Do you want experiment logs or methods?' %>
Does anyone know how to make the vertical alignment uniform so that checkboxes are not out to the left of the rest of the form elements?
Thank you
To expand on the above,
I'd like the checkbox to be left aligned in line with the left edge of the other form elements. At the moment, it is further left (like there is some kind of negative margin on that check box element).
I'd like all three of these field inputs to be flush at the left alignment. At the moment, the check box in the two boolean elements is further left than the third text field:
<%= f.input :survey, :as => :boolean, :label => false, inline_label: 'Do you need survey responses?' %>
<br><br>
<%= f.input :survey_link, label: 'Where is your survey?', :label_html => { :class => 'question-data' }, placeholder: 'Include a link to your survey', :input_html => {:style=> 'width: 650px; margin-top: 20px', class: 'response-project'} %>
<br>
<%= f.input :experiment, :as => :boolean, :label => false, inline_label: 'Do you want experiment logs or methods?' %>
As doc suggested here http://montrezorro.github.io/bootstrap-checkbox/ You should have data-label in your input so change your input like this:
<%= f.input :experiment, :as => :boolean, :label => false, :input_html => { :'data-label' => 'Do you want experiment logs or methods?' } %>
If you want prepend then :
<%= f.input :experiment, :as => :boolean, :label => false, :input_html => { :'data-label-prepend' => 'Do you want experiment logs or methods?' } %>
I made a custom wrapper like this:
config.wrappers :inline_checkbox, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
b.use :html5
b.optional :readonly
b.wrapper tag: 'div', class: 'col-sm-10 col-sm-offset-2' do |ba|
ba.wrapper tag: 'div', class: 'checkbox' do |baa|
baa.use :input
end
#ba.use :input
ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' }
end
end
In my case I wanted a simple inline checkbox with the label to the right to place below another form element. You may need to play with the col-sm-10 col-sm-offset-2. This goes in your SimpleForm initializer (or make a separate one line I did to avoid breaking things in the original). Also you need to restart your app to see the changes take effect.
I am using Rails 3.1x, SimpleForm 2.1, and Bootstrap 2.2.x, and I want to change the position of the hint text on some of my forms.
Currently if I use code such as the following (this is a simplified version)
<%= simple_form_for #user, :html => { :class => 'form-horizontal' } do |f| %>
<%= f.input :name, :hint => 'this should be your first name' %>
..
..
I will get a form looks like this
However, I would like it to look like this.
Any thoughts?
I am not sure its works well but try this , in your form field add class
<%= f.input :name, :hint => 'this should be your first name' , :class => "someclass"%>
and in application.css
.somecalss
{
width:somevalue;
}
I'm working with a very large Ruby on Rails app, so I won't be able to include much of the source code. If I miss anything needed for the solution, please let me know, and I'll see if I can find it.
The part of the app I'm working on is the sign up page. We're using haml for the view, and bootstrap for styling. Here's the view code that's in a _form.html.haml partial:
= simple_form_for(resource, :as => resource_name,:class=>"", :url => registration_path(resource_name)) do |f|
.row-fluid
= f.input :email, :as => :string, :input_html => { :class => 'span12', :type => 'email', :required => 'required' }
.row-fluid
.span6
.input-append{ "data-role" => "acknowledge-input" }
= f.input :firstname, :as => :string, :label => 'First Name', :input_html => { :class => 'span12', :type => 'text', :required => 'required', :placeholder => "Letters Only Please" }
.span6
= f.input :lastname, :as => :string, :label => 'Last Name', :input_html => { :class => 'span12', :type => 'text', :required => 'required', :placeholder => "Letters Only Please" }
.row-fluid
.span6
= f.input :password, :as => :password, :input_html => { :class => 'span12', :type => 'password', :required => 'required' }
.span6
= f.input :password_confirmation, :as => :password, :input_html => { :class => 'span12', :type => 'password', :required => 'required' }
.row-fluid
.span7
%small
= link_to 'Already a Member?', new_user_session_path
.span5
= f.submit "Sign up", :class=>"btn btn-success btn-block"
I've got it set up (through bootstrap) so that it will outline each text box in red if the conditions for that particular variable are not met, and at the bottom of the page is a Sign Up button. The main problem we're having is that if you madly click on the Sign Up button, the system will happily create several copies of the user in the database. Ideally, the Sign Up button should disable itself after the first click (until the page is refreshed). I know there's a disabled option provided by Bootstrap, but I'm not sure how to trigger that only after the button has been clicked once.
As a corollary, I'd really like it if the button was actually disabled until all the front-end validation was done. But that's a bonus, not the main issue. ^_^
EDIT
As #rlecaro2 mentioned below I would really prefer something to happen when I click the button. As an initial attempt, I've added the following code:
- if submit_clicked?
= f.submit "Sign up", :class=>"btn btn-success btn-block", :disabled => 'disabled'
- else
= f.submit "Sign up", :class=>"btn btn-success btn-block", :onclick => "click_submit"
The two method are Ruby methods I've put in application_helper.rb:
def click_submit
#submit_clicked = true
end
def submit_clicked?
#submit_clicked
end
Unfortunately, this doesn't seem to work at all. I can click the button multiple times still. I suspect it has something to do with onclick wanting a JavaScript method. How do I have a separate Ruby method run when I click the button? It has to happen before the form is sent, because the whole point of this is that I only want the form to be sent once.
I'm guessing you use javascript for your front-end validations, in that case you could start up with the button disabled and enable it at the end of said validations.
Or better, don't display the button until you're ready to sign up, and make it disappear after clicked.
Both effects can be achieved using Jquery in a pretty straight-forward manner.
You should do this on the view's javascript file (under assets).
I'm out of time but check out this detailed
answer.
GL & HF.
I'm having problems with my views. I'm using zurb foundation for stylesheets and when I enter wrong input in forms I get the error above the form but the fields containing the errors are not wrapped with red. Looking further into this there is no field_with_errors div wrapper for the input fields. After looking further into this I found out if I use f.input instead of f.text_field I get the correct error wrapping.
As zurb has styles for text_field, text_area etc. I'm using those but I don't get the error div from rails. Is there any good solution to this?
Here I get correct Zurb foundation styling but no field_with_errors div:
.field
= f.label :name
= f.text_field :name, :class => "input-text"
Here I don't get the Zurb styling but the element is wrapped with field_with_errors div:
.field
= f.label :name
= f.input :name, :class => "input-text"
So basicly it seems the f.text_field helper somehow bypasses the Rails view mechanism of providing div classes to show the errors.
f.text_field is the Rails form helper, not simple_form's helper (Since you tagged this with simple-form, I'll assume you are using that). Since simple form only wraps its own attributes with errors, it is ignoring the rails form helper attributes.
What you probably want is
= f.input :name, :as => :string
You also don't need your own label with simple_form either, so we can condense f.label and f.text_field to become:
= f.input :name, :as => :string, :label => "Custom label"
If you leave off the :label attribute, it will default to the name of the symbol, in this case your label will be "Name". With the :label attribute gives you a label titled "Custom Label".
Hope that helps.
If you want to pass class to SimpleForm's input you should use
= f.input :name, :input_html => { :class => 'input-text' }
I'm creating a custom module where I'd like to have the "add another item" functionality for a particular field, but I can't seem to figure out what I need to do in order to accomplish this... I've been going through Drupal forums and their Forms API Reference, but I must not be getting something.... I'm using Drupal 6.20, and in my module, I tried:
$form['options'] = array(
'#title' => t('Options'),
'#type' => 'fieldset',
);
$form['options']['address'] = array(
'#type'=>'textfield',
'#title'=>t('Address'),
'#tree' => 1,
);
Thinking I would get an text input that looked like this:
<input type="text" class="form-text text" value="" size="60" id="edit-address-0-value" name="address[0][value]">
But, I just get an input that looks like this:
<input type="text" class="form-text" value="" size="60" id="edit-address" name="address" maxlength="128">
You need to set #tree on the element above the one you want to duplicate. FAPI will store values in a tree structure from that element on downwards.
To get a name like address[0][value] you will need something like
$form['options']['address'] = array(
'#tree' => TRUE,
);
$form['options']['address'][0] = array(
'#tree' => TRUE,
);
$form['options']['address'][0]['value'] = array(
'#type'=>'textfield',
'#title'=>t('Address'),
);
But you don't need the [value] part unless you are actually trying to achieve multi-valued grouped fields or if your field has a complex (custom) data type implemented with multiple PHP values (ie. latitude/longitude, start/stop dates, etc.).
You will also probably need to store the number of values in something like $form['options']['#nb_values'] or in an hidden field (if you plan to add the additional fields to the form using JavaScript).