I am trying to create a rails form but I would like all of its input fields to appear in one line. I have no experience with css and I am relatively new to rails. My form is the following:
<%= form_for #need, url: shipping_company_fleet_ship_voyage_needs_path(:voyage_id => #voyage.id), :html => {:class => "needForm"} do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<%= f.label :quantity %>
<%= f.number_field :quantity %>
<%= f.hidden_field :voyage_id, :value => #voyage.id %>
<%= f.submit "Add need" %>
<% end %>
I have tried various things, like requesting for class .needForm float: left or display: inline but it does not seem to affect the input fields.
Can someone point me to a direction or an online example? I read all related questions here but the answers were not very helpful for me. Do I have to use bootstrap classes to make it work?
I managed to get the desired result by using bootstrap default styles for forms (check this link, I used 'form-inline' and 'input-mini': http://getbootstrap.com/2.3.2/base-css.html#forms)
<%= form_for #need, url: shipping_company_fleet_ship_voyage_needs_path(:voyage_id => #voyage.id), :html => {:class => "form-inline"} do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<%= f.number_field :quantity, :value => 1, class: 'input-mini' %>
<%= f.hidden_field :voyage_id, :value => #voyage.id %>
<%= f.submit "+", class: 'btn btn-small btn-primary' %>
<% end %>
Related
SyntaxError occurs when:
<% #list1.each do |list| %>
<div class="well well-sm">
<%= list.test_name %> <%= link_to 'Do It', '#', class: <%= list.test_type %>
</div>
<% end %>
Tried also
class: <%= #{list}.test_type %>
and so on... what's wrong with it?
You have excess erb open tag <%=, instead:
<%= list.test_name %> <%= link_to 'Do It', '#', class: <%= list.test_type %>
^^^open close^^ ^^open ^^^open close^^
use:
<%= list.test_name %> <%= link_to 'Do It', '#', class: list.test_type %>
I suggest you read An Introduction to ERB Templating
try this:
<%= link_to 'Do It', '#', class: list.test_type %>
or
<%= link_to 'Do It', '#', class: "#{list.test_type}" %>
I have a login form thanks to form_for helper and in my opinion it has an ugly button styling.
And I would like to have a button similar to this.
I'm wondering is there any way to customize form_for submit button?
_form.html
Log In
<%= form_tag '/authenticate' do %>
<div class="email">
<%= label_tag :email %><br />
<%= text_field_tag :email, params[:email] %>
</div>
<div class="password">
<%= label_tag :password %><br />
<%= password_field_tag :password %>
</div>
<%= submit_tag "Log In" %>
<% end %>
It looks like you are using bootstrap as CSS Framework, so you can do this:
<%= submit_tag 'Log In', class: 'btn btn-default' %>
You can add a class to the submit button, and then give style to that class.
<%= submit_tag 'Log In', class: 'button-class' %>
I was on developing Rails App with bootstrap CSS, depends on the DRY concept, can this form be simplified?
<%= form_for #user , :html => {:class => "form-horizontal"} do |f| %>
<fieldset>
<legend>Sign Up</legend>
<div class="form-group">
<%= f.label :email ,:class=>"control-label" %><br />
<%= f.text_field :email, :class =>"form-control", :placeholder=>"Email" %>
</div>
<div class="form-group">
<%= f.label :password ,:class=>"control-label" %><br />
<%= f.password_field :password, :class =>"form-control", :placeholder=>"Password" %>
</div>
<div class="form-group">
<%= f.label :password_confirmation,:class=>"control-label" %><br/>
<%= f.password_field :password_confirmation , :class =>"form-control", :placeholder=>"Confirm Password" %>
</div>
<%= f.submit 'Submit', :class => 'btn btn-primary' %>
</fieldset>
<% end %>
I mean like the tag fieldset , legend, the :class=>"control-label" and the others.
What you need is a custom form builder. The basic point is to encapsulate field decoration (and even labeling, in many cases), so that you get similar output to your code above, with something like this:
<%= form_for #user, builder: MyFormBuilder do |f| %>
<%= f.input :email %>
<%= f.input :password %>
<%= f.input :password_confirmation %>
<%= f.button :submit %>
<% end %>
There are many tutorials on how to build your own, it can be extremely handy and it is a great way to learn more. If you want a prepared solution, have a look at the simple_form gem.
Is it possible to have some elements displayed as block and some as inline in form_for block? I have few elements in the form_for block. The first one I want to be displayed on one line by itself and the other two (collection_select and submit) I want to be displayed on the same line together. Is this possible?
Here's my code:
<div class="container form-group">
<%= form_for(#comment) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<%= f.hidden_field :problem_id, :value => #problem.id %>
<%= f.label :content, "Add Comment:" %>
<%= f.text_area :content %>
<%= f.label :comment_type, "Comment Type:" %>
<%= collection_select(:comment, :comment_type_id, CommentType.all, :id, :name, prompt: false) %>
<%= f.submit "Add" %>
<% end %>
</div>
I want collection_select and submit on the same line basically. How can I do this?
I assume this to be a CSS question, but I could be wrong. Also I'm using bootstrap-sass gem, if that changes anything.
http://getbootstrap.com/css/#forms-inline
Have a looksee at that. You could then manually add <br/> tags? That's be the quick and dirty.
When you're adding a class to a form in rails, though, you need to do
<%= form_for #comment, html: {class: 'form-inline', role: form} do |f| %>
You could also just override the elements that are returning on you. The labels might be doing that to you. Do you know how to check that in the browser?
I have a nested model form in the style of this Railscast
http://railscasts.com/episodes/196-nested-model-form-revised?view=asciicast
I need to give each tag a unique ID. Currently, each field generated has a unique ID and name given by a helper method that assigns a unique ID to every association record. So that is taken cared of. However, this form has "fieldset" tags which isn't assigned an ID. I need a unique ID for each fieldset for jQuery manipulation purposes.
Specifically, how do I do give each fieldset generated for an "Activity" record a unique CSS tag ID?
Posted below is how my form is created. Thank you
_form.html.erb
<%= form_for(#trip) do |f| %>
<%= f.fields_for :days do |builder| %>
<%= render 'day_fields', f: builder %>
<% end %>
<%= link_to_add_fields "Add Day", f, :days %>
_day_fields.html.erb partial
<fieldset>
<%= f.label :summary, "Day Summary" %><br />
<%= f.text_area :summary, :rows => 1 %><br />
<%= link_to "remove", '#', class: "remove_fields" %>
<%= f.fields_for :activities do |builder| %>
<%= render 'activity_fields', f: builder %>
<% end %>
<%= link_to_add_fields "Add Activity", f, :activities %>
</fieldset>
_activity_fields.html.erb
<fieldset>
<%= f.label :title, "Activity" %><br />
<%= f.text_field :title, :rows => 1 %><br />
<%= f.hidden_field :_destroy %>
<%= link_to "remove", '#', class: "remove_fields" %>
</fieldset>
If you are using ryanb nested_form gem :
Use f.index instead. And make sure that you pass every different form_builder in your partials.
For example if you do
<%= main_form.fields_for :nested1_items do |nested1_form| %>
<%= render partial 'main/nested1_fields', nested1_form: nested1_form %>
<% end %>
_nested1_fields
<fieldset id="nested1-<%= nested1_form.index %>-items">
See my answer in this question.
Why not just use the f.object passed in to both partials?
<% fieldset_id = "#{f.object.class.underscore}_#{f.object.id}" %>
<fieldset id='<%= fieldset_id %>'>
...
I had a similar issue, and I solve it using the time in seconds, and pass it to every where I needed.
For example:
in the controller
def something
# First idea
#dynid = Time.now.to_i
...
# Second idea: store it in the session
session[:dynid] = Time.now.to_i
...
end
in your view
<fieldset id="#{#dynid}">
<!-- or in case #dynid is out of reach, then use the session[:dynid] -->
<fieldset id="#{session[:dynid]}">
The session[:dynid} will still works even with ajax rendered code.
I hope this helps you.