tell me how to configure simple_form. I would like to use the checkbox of semantic ui, but when I wrap checkbox in the class, he becomes active, that is, visually it is, but when you click the check box is not activated.
= simple_form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f|
.ui.three.column.middle.aligned.relaxed.grid.basic.segment
.column
.column
.column
.ui.form.segment
#marg.field= f.label :email, 'Email'
#marg.field=f.input :email, placeholder: 'Email', autofocus: true, label: false
#marg.field= f.label :password, 'Пароль'
= f.input :password, :required => false, placeholder: 'Пароль', label: false
#marg.ui.toggle.checkbox
= f.input :remember_me, as: :boolean if devise_mapping.rememberable?
#marg= f.button :submit, 'Войти!', class: 'small ui blue submit button'
http://i.imgur.com/C8Wn4K9.png
Please try it
= f.input :remember_me, as: :boolean, boolean_style: :inline
A simpler way to do this is to create a custom simple form wrapper. Here is a blogpost which describes how to add the wrapper: http://pranavsingh.me/semantic-ui-simple-form-wrapper/
The above configuration will automatically add all the essential classes semantic form classes, and also adds wrappers to create proper checkbox fields. Below is an example:
= f.input :published, label: "Published?",
hint: "If you are not ready to go live yet, keep this site unpublished.",
wrapper: :ui_toggle_checkbox
Here's what I had to do (the accepted answer got me on the right track, but didn't fully fix the issue):
In the config/initializers/simple_form.rb file, change
config.boolean_style = :nested
to
config.boolean_style = :inline
This prevents Simple Form from wrapping the input tag in the label tag (essentially inserting a tag between the '.ui .checkbox' div and the input, which breaks Semantic's checkbox functionality).
In the app/assets/javascripts/application.js file:
$('.ui.checkbox').find('input').checkbox();
My form now displays checkboxes correctly and passes the appropriate value when submitted.
Here is another option (to just fix one checkbox) -
In a _form.html.erb partial:
<div class="inline field">
<div class="ui checkbox">
<%= my_form.input :my_input, label: 'My Label', as: :boolean, boolean_style: :inline %>
</div>
</div>
In the application.js file:
$('.ui.checkbox').find('input').checkbox();
Related
I Have a code in my project like
<div class="form-inputs">
<%= f.input :twitter %>
</div>
It gives label as Twitter in my website. How it produce label with out giving label parameter. I want to change label to something else like Tweet it.
You can add label in very simple way
<%= f.input :twitter, label: 'Tweet it' %>
Check this simple_form usage
If you want to disable label
<%= f.input :input_field_name, label: false %>
Add custom class to label
<%= f.input :field_name, label_html: { class: 'my_class' } %>
I have a Simple Form checkbox which uses both a regular field label and an inline label:
<%= f.input :remove_default_template,
label: 'Advanced Option',
inline_label: "Remove Header, Footer, and Department Name"
%>
And I need to add styling to the inline label. How can I do this? I would expect something following this pattern to work:
<%= f.input :remove_default_template,
label: 'Advanced Option',
inline_label: "Remove Header, Footer, and Department Name",
inline_label_html:
input_html: {class: "input_class"}, # THIS works
wrapper_html: {class: "wrapper_class"}, # THIS works
label_html: {class: "label_class"}, # THIS works
inline_label_html: {class: "inline_label_class"} # THIS DOES NOT WORK!!!
%>
but the final line doesn't work:
inline_label_html: {class: "inline_label_class"}
Since Simple Form doesn't seem to support this option (at least under the name I expected, nor anything else that I could find), how can I accomplish the same goal?
You might want to have a hint, not an inline label.
Then you can write a wrapper, which allows doing something like this
<%= f.input :subdomain, input_wrapper_html: { class: 'col-sm-4' } %>
And then your hints will be inline.
Please check here https://github.com/plataformatec/simple_form/issues/1035
I have a hidden field as such:
<%= f.input :authentication, label: 'Authentication Password', as: :hidden %>
I want to show the hidden field when the admin radio button is clicked:
<%= f.input :account_type , as: :radio_buttons, :checked => 'Student', collection: ['Student', 'Admin'], wrapper: :vertical_radio_and_checkboxes %>
How would I do so?
I have tried using
$('#user_authentication').show();
But this does not work.
Remove as: hidden and use
$('#user_authentication').hide(); when DOM is loaded.
I'd like to create a custom label for a simple form field. For some reason, the below code isn't creating that label. It's still using the default label. I must be missing something easy.
Simple Form 3.1
<%= simple_form_for "#" do |f| %>
<%= f.input :street, label: "Custom Label" %>
...
<% end %>
How can I create a custom label for my inputs in Simple Form?
You need to use a label helper along with your input helper:
<%= simple_form_for "#" do |f| %>
<%= f.label :street, 'Custom label' %>
<%= f.input :street, as: :string, label: false %>
<% end %>
You can also directly specify input types ie. f.text_field - More info : http://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html
You can now pass a label as argument. So the syntax as shown in the question (from 2015) now works:
<%= f.input :street, label: "Custom Label" %>
See the "Usage" section of the readme.
Using Rails 3 with Twitter Bootstrap and Simple_form, I am having issues changing the length of the input box in this field:
<div class="input-prepend input-append">
<%= f.input :price, :wrapper => :append do %>
<span class="add-on">$</span>
<%= f.input_field :price %>
<span class="add-on">.00</span>
<% end %>
</div>
Others say to add this after the :price variable:
:input_html => {:size => 15}
The 'do' loop seems to change the rules, any suggestions?
try
:style => "width: 100px;"
Twitter bootstrap has css classes for this. Depending on what size you want you can add class input-min, input-small, input-large and so on. You can also use the span classes, e.g. span1, span2, etc.
<div class="input-prepend input-append">
<%= f.input :price, :wrapper => :append do %>
<span class="add-on">$</span>
<%= f.input_field :price, :class => 'input-medium' %>
<span class="add-on">.00</span>
<% end %>
</div>
I am using the f.input form to create controls with labels in a :class => 'form-horizontal' form, using a class attribute or style attribute (directly or as a hash, any way I tried) didn't work for me, and had zero effect on the generated HTML.
This is what worked for me:
<%= f.input :description, input_html: { class: 'span12' } %>
This works with both the Bootstrap column layout classes ('span1', 'span2', etc,) the input sizing classes ('input-large', 'input-xxlarge', etc,) or whatever custom class you want. The trick is using the input_html key. You can also mess with the label using the label_html key but that's likely to mess up the form-horizontal layout.
It looks like the size key in :input_html => {**:size** => 15} is ignored by SimpleForm... when I tired this it did not affect the HTML output.
I found this here in the SimpleForm docs:
https://github.com/plataformatec/simple_form#usage