This is my form for now in my new_html_erb.
We are doing a promotion for the next two weeks
<%= simple_form_for #subscription, :html => { :class => 'form-horizontal'} do |f| %>
<%= f.input :manual_expiry_date %>
<%= f.association :user %>
<%= f.button :submit, :class => 'btn btn-primary'%>
<% end %>
I have used twitter bootstrap on and off. The form that I am working on for a rails application is using bootstrap.
How do I add bootstrap datepicker to manual_expiry_date ?
How do I center my simple_form_for?
I have tried putting the form in a container, then a row, then adding form control all in divs. There was no marked change. I have tried adding it as a class to simple_form but still the same.
Thank you for the help.
Twitter Bootstrap dont have in his core a date-picker, buy you can use "DatePicker For Bootstrap" www.eyecon.ro/bootstrap-datepicker/
You need to specify the class of the object
<%= f.input :manual_expiry_date, input_html: { class: 'date_picker' } %>
and then
$('.date_picker').datepicker()
Related
I want to wrap this line of ruby in a select style in bootstrap but every time I do it breaks and lists all the generated options outside the form.
Here in the code I want to wrap
<%= f.label :user_description_id %>
<%= f.collection_select(:user_description_id, UserDescription.all, :id, :description, include_blank: true) %>
You should be doing somethin linke this:
<%= f.label :user_description_id %>
<%= f.collection_select(:user_description_id, UserDescription.all, :id, :description, {include_blank: true}, {class: "css-class"} ) %>
Reference: http://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-collection_select
I have a large simple_form form with fields that need to be enabled or disabled depending upon where the form's partial gets loaded.
My question is: how do you disable every form input quickly using simple_form helpers / wrappers?
Simple Form's documentation explains how disabled: true can be used to disable a single input field:
<%= simple_form_for #user do |f| %>
<%= f.input :username, disabled: true %>
<%= f.button :submit %>
<% end %>
But the documentation is less clear on how I can disable an entire form via simple_form helpers without needing to repeat disabled: true on literally every form input.
I tried passing disabled: true and readonly: true to simple_form's :wrapper_mappings option, but that isn't working.
Example Code:
I load the form via a partial to define simple_form display variables. This works:
#user/show.html.erb:
<%= render partial: 'shared/form', locals: {questionnaire: #questionnaire, readonly_state: true, disabled_state: true, bootstrap_form_class: 'form-horizontal'} %>
However, readonly_state and disabled_state do not work unless I pass them to every form input:
# shared/_form.html.erb
<%= simple_form_for(#questionnaire, :html => {:class => bootstrap_form_class},
:wrapper_mappings => {check_boxes: :vertical_radio_and_checkboxes, file: :vertical_file_input,
boolean: :vertical_boolean }) do |f| %>
<%= f.input :username, disabled: disabled_state, hint: 'You cannot change your username.' %>
<%= f.input :email, disabled: disabled_state %>
<%= f.input :city, disabled: disabled_state %>
<%= f.input :country, disabled: disabled_state %>
. . .
<%= f.button :submit %>
<% end %>
You can quickly see how repetitious this gets with a large form.
How do I toggle disable and readonly form attributes quickly across an entire form using DRY code?
You can create a custom wrapper that disables the input like this:
# config/initializers/simple_form.rb
config.wrappers :disabled_form do |b|
b.use :input, disabled: true, readonly: true
end
And in the form use:
<%= simple_form_for #model, wrapper: :disabled_form %>
<%= f.input :field %>
...
<% end %>
Depending on the amount of different inputs in the form, you might need to create more custom wrappers and use a wrapper_mapping in the disabled form.
Funny:
<%= f.input :username, disabled: true %>
Generated 'disabled' class for element.
<%= f.input :username, input_html: {disabled: true} %>
Don't do this :)
But you can do these:
<%= f.input :username, input_html: {readonly: :true} %>
or
<%= f.input :username, input_html: {disabled: :true} %>
Where (unlike readonly) the cursor changes to 🛇
Just a suggestion, you can achieve the behaviour using jquery by setting $('.form input').prop('disabled', true); where form is your form class.
You can use CSS to mimic the disabled property.
Just create the class and add it conditionally.
.disable {
background: #f2f2f2;
pointer-events:none;
}
I am trying to edit the font and styling of all form labels in my Rails app. Is there one CSS class I can use that will apply to all form fonts across the app?
The current section I am trying to change is:
<%= f.label :username %>
<%= f.text_field :username %>
<%= f.label :bio %>
<%= f.text_area :bio, :cols => "80", :rows => "10" %>
<%= label_tag "Profile Picture" %>
<%= collection_select(:user, :profile_picture_id, ProfilePicture.all, :id, :name, prompt: true) %>
I would like the :username, :bio, and "Profile Picture" labels to be in a different font without specifying a class parameter in each one.
You can apply your CSS rules to tags too:
In plain CSS:
label {
/* Attributes that apply to all label tags */
font: 16px sans-serif;
}
At the top of the user's profile I have this button:
<%= button_to 'Make a detailed enquiry', user_path(#user), :class=>"enquirySection", :method => :get %>
Then at the very bottom of the page I am rendering a form in which the viewer can make an enquiry:
<div class="enquirySection">
<%= render "enquiries/form" %>
</div>
I want the user to be scrolled down to this form when (s)he clicks on the button so I added the ":class=>"enquirySection"" and "div class="enquirySection"". It doesn't work.
I tried something similar to that but I think it does not related to my case.
Any clue of how is this done in Rails with button_to?
Thank you.
You don't need a class, but an id
try
<%= button_to 'Make a detailed enquiry', user_path(#user, anchor: :enquirySection), :method => :get %>
or simply
<%= link_to 'Make a detailed enquiry', user_path(#user, anchor: 'enquirySection) %>
and then
<div id="enquirySection">
<%= render "enquiries/form" %>
</div>
would do the job.
I have excel, video, and multiple choice boolean columns in my Step model. I am trying to get it so the user has to choose one of the three, and when saved it passes back to the database as true. Right now my two problems are a)when I select one, it doesn't deselect the others and b) the radio button is on a different line than the text that labels it. Any help would be appreciated.
<fieldset class="stepCreator">
<%= "Step" %>
<%= f.label :description, "Description" %>
<%= f.text_field :description %>
<div>
<%= f.label :excel, "Excel" %>
<%= f.radio_button(:excel, true, :checked => true) %>
<%= f.label :video, "Video" %>
<%= f.radio_button(:video, true) %>
<%= f.label :multiple_choice, "Multiple Choice" %>
<%= f.radio_button(:multiple_choice, true) %>
</div>
<%= f.hidden_field :_destroy %>
<%= link_to "remove", '#', class: "btn btn-danger btn-mini remove_fields "%>
</fieldset>
Actually you have 2 very different problems.
All the radio buttons (that you want to select one and automatically deselect the others) must have the same name, and different values, so it should be something like:
f.radio_button(:media, :excel, :checked => true)
f.radio_button(:media, :video)
For the labels to be at the same line as the checkbox, you just have to change the CSS.
From the documentation:
http://guides.rubyonrails.org/form_helpers.html
try:
<%= radio_button_tag(:age, "child") %>
<%= label_tag(:age_child, "I am younger than 21") %>
<%= radio_button_tag(:age, "adult") %>
<%= label_tag(:age_adult, "I'm over 21") %>
radio buttons have to select the same attribute in your model, in this example i selected the age attribute and i can give it 1 of two values, or he is a child or he is an adult
hope it helps