As always with Ruby on Rails I use simple_form gem to handle forms in more elegant and, well, simple way. But i have this problem, that string inputs are not generated properly. i mean they work as they are supposed to, but they are just extremely long, like totally out of my screen. it isn't normal behaviour is it? should i apply any special css for this? or maybe there is some other solution?
This form i have looks like this:
= simple_form_for #book, url: books_path, method: :post do |f|
= f.input :title, label: false, placeholder: "title"
= f.input :author, label: false, placeholder: "author"
= f.input :isbn, label: false, placeholder: "ISBN"
= f.input :publishing_date, label: false, placeholder: "Publishing date"
= f.input :amount, label: false, placeholder: "Amount"
= f.submit class: "btn btn-success"
Other that this i just put 'gem "simple_form"' to the Gemfile and thats it.
There is a good answer I found from typing simple_form width:
{:maxlength =>2,:style=> 'width: 20px'}%>
from this answer:
Rails Simpleform setting the width of a form input element
Related
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 want to combine any editor(tinymce, ckeditor, etc) to simple_form text. It just doesn't show any effect when I use tinymce. I've used it before with bootstrap_form text_area and not used with simple_form before. Thanks.
<%= f.input :content, as: :text, label: false, placeholder: "Add description...", input_html: {class: " tinymce" } %>
I am using simple_form in my rails application. I want to disable a particular value in drop-down.
Here is part of the code
= simple_form_for(#organization,url: admin_organization_path) do |f|
= f.input :hospital_name, input_html: { class: "form-control"}
= f.input :parent, collection: #organizations, input_html: { class: "form-control", id: "chosen-select-speciality"}
I tried using :disabled => #organizations.first but i was failed.
Is there any other method to use.Kindly help me. thanks.
Simpleform builder for select box uses value of the each option to compare with value of disabled attribute, so you just simple have to use id of the organization to disable desired option:
= simple_form_for(#organization,url: admin_organization_path) do |f|
= f.input :hospital_name, input_html: { class: "form-control"}
= f.input :parent, collection: #organizations, input_html: { class: "form-control", id: "chosen-select-speciality"}, disabled: #organizations.first.id
If you want to disable several options for selectbox, you can manually build options list inline or using helper and use it as attribute for input:
= f.input :parent, collection: #organizations.map{|o| [o.id, o.name, {disabled: o.id.in?([1,21,10])}]}, input_html: { class: "form-control", id: "chosen-select-speciality"}
By using JavaScript you can easily disable a particular value in drop-down as:
$(/* option selector */).prop('disabled', true);
See it in action
To disable the particular value use below code:
<%= f.input :parent,
collection: #organizations,
input_html: { class: "form-control",
id: "chosen-select-speciality"},
disabled: #organizations.first.id %>
If you want to disable multiple options, put below code to fetch the list of unused organizations in your helper file:
#unused_org_list = Organization.where("Condition to fetch unused organizations")
Then, in your view file:
<%= f.input :parent,
collection: #organizations,
input_html: { class: "form-control",
id: "chosen-select-speciality"},
disabled: #unused_org_list&.map {|u| u.id} %>
NOTE: Make sure to pass ids into disabled option as it expect id or [array of ids]
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();
How can I add placeholder text to my f.text_field fields so that the text comes pre-written by default, and when a user click inside the fields, the text goes away - allowing the user to type in the new text?
With rails >= 3.0, you can simply use the placeholder option.
f.text_field :attr, placeholder: "placeholder text"
In Rails 4(Using HAML):
=f.text_field :first_name, class: 'form-control', autofocus: true, placeholder: 'First Name'
For those using Rails(4.2) Internationalization (I18n):
Set the placeholder attribute to true:
f.text_field :attr, placeholder: true
and in your local file (ie. en.yml):
en:
helpers:
placeholder:
model_name:
attr: "some placeholder text"
I tried the solutions above and it looks like on rails 5.* the second agument by default is the value of the input form, what worked for me was:
text_field_tag :attr, "", placeholder: "placeholder text"
Here is a much cleaner syntax if using rails 4+
<%= f.text_field :attr, placeholder: "placeholder text" %>
So rails 4+ can now use this syntax instead of the hash syntax
In your view template, set a default value:
f.text_field :password, :value => "password"
In your Javascript (assuming jquery here):
$(document).ready(function() {
//add a handler to remove the text
});
This way works to me.
<%= form_for #product do |f| %>
<%= f.label :name %>
<%= f.text_field :name, placeholder: "Drill hammer" %>
<% end %>
As you can see, to implement a placeholder, you just can add the "placeholder: "text here", after your text_field name.
Hope my answer can be understood!