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' %>
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 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'm working on a front end of web app. I would like to know how to make the button and textfield in line. Another question is how to make the error message displayed just below the textfield?
Picture:
https://www.dropbox.com/s/vsdy3730flraes3/Screen%20Shot%202013-12-01%20at%204.47.20%20PM.png
Here is the code:
<div class="input-group" align="center" >
<%= form_tag(location_search_path,method: "get" ) do %>
<%= text_field_tag('location', params[:location], :size => 150, :placeholder=> "Enter city or zip code") %>
<%= button_tag(type: "submit", class: "btn btn-success ") do %>
Search
<i class="icon-search"></i>
<% end %>
<% end %>
</div>
<% [:notice, :error, :alert].each do |level| %>
<% unless flash[level].blank? %>
<div data-alert="alert" class="alert-message <%= flash_class(level) %> fade in" align="center">
<%= content_tag :p, flash[level] %>
</div>
<% end %>
<% end %>
Add the <div class="form-inline"> to your form element to get the button and field onto the same line, and I guess you could us a <p> to make the message appear below it, though I would probably set up the input group in a row with columns to center it rather than the align tag you are using, and then put the messages into a new <row> below it in the same column.
<div class="input-group" align="center" >
<div class="form-inline">
<%= form_tag(location_search_path,method: "get" ) do %>
<%= text_field_tag('location', params[:location], :size => 150, :placeholder=> "Enter city or zip code") %>
<%= button_tag(type: "submit", class: "btn btn-success ") do %>
Search
<i class="icon-search"></i>
<% end %>
<% end %>
</div>
</div>
<p>
<% [:notice, :error, :alert].each do |level| %>
<% unless flash[level].blank? %>
<div data-alert="alert" class="alert-message <%= flash_class(level) %> fade in" align="center">
<%= content_tag :p, flash[level] %>
</div>
<% end %>
<% end %>
bootstrap 3 has input groups... which are nice. http://getbootstrap.com/components/#input-groups
Try this in your code...
<%= form_tag location_search_path, method: 'get' do %>
<%= text_field_tag :location, params[:location], size: 150, placeholder: "Enter city or zip code" %>
<span class='input-group-btn'>
<%= submit_tag 'Search', class: 'btn btn-success' %>
</span>
<% end %>
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 %>