Ruby on Rails - adding CSS to text_field - css

I created a form in Rails and when I add a CSS class to a text_field the form will not submit.
I am still new to rails so any help would be much appreciated.
This is my form:
<% #page_title = "Contact" %>
<hr>
<div class="col-lg-12">
<h1 class="page-header">
BK Legal Courier Corp <br />Call BK # <span style="color:#47B224">613-286-8265</span>
</h1>
</div>
<hr>
<div class="container">
<h2>Contact Us</h2>
<%= form_for :fc, :url => {:action => 'create'} do |f| %>
<div class="form-group">
<%= f.label :first_name %>
<%= f.text_field (:first_name, :class => 'form-control')%>
</div>
<div class="form-group">
<%= f.label :last_name %>
<%= f.text_field (:last_name, :class => 'form-control') %>
</div>
<div class="form-group">
<%= f.label :email %>
<%= f.text_field (:email, :class => 'form-control') %>
</div>
<div class="form-group">
<%= f.label :comment %>
<%= f.text_area (:comment, :class => 'form-control') %>
</div>
<div class="form-group">
<%= f.label :referral %>
<%= f.select (:referral, [['Friends', 1], ['News', 2], ['Online', 3], ['Other', 4]], :class => 'form-control')%>
</div>
<%= submit_tag ("Submit") %>
</form>
</div>
<% end %>
</body>
</html>
The problem is that my form will only submit without the :class => "form-control" in it. I must have brackets around each of the form field variables.
This is my routes.rb file:
Rails.application.routes.draw do
root "home#index"
match ':controller(/:action(/:id))', :via => [:get, :post]
end
This is my controller:
class HomeController < ApplicationController
def home
render("home/index")
end
def new
#fc = FeedbackCustomer.new
end
def create
# Instantiate a new object using form parameters
#fc = FeedbackCustomer.new(feedbackcustomer_params)
if #fc.save
redirect_to(:action => "home")
end
end
def application
end
private
def feedbackcustomer_params
params.require(:fc).permit(:first_name, :last_name,
:email, :comment, :referral)
end
end
Any help would be much appreciated. Thanks!

If you're using Ruby 1.9+ This should work:
<%= f.text_field :last_name, class: 'form-control' %>
If you're using a version that's older than 1.9 then this should work:
<%= f.text_field :last_name, :class => 'form-control' %>
For more information on this you can use the ActionView::Helpers::FormTagHelper API Documentation
The Form Helpers Rails Guide might be helpful to you as well.

For the most recent version of Ruby you can now also do:
<%= f.text_field :last_name, class: 'form-control' %>

Related

My "Delete Comment" function from my Ruby on Rails Blog Website doesn't work and I don't know why

My "Delete Comment" function from my Ruby on Rails Blog Website doesn't work and I don't know why.
Here is my error:
Routing Error
No route matches [POST] "/posts/17/comments/9"
Rails.root: C:/Sites/blog
Routes
Routes match in priority from top to bottom
"comments_controller.rb" file:
class CommentsController < ApplicationController
def create
#post = Post.find(params[:post_id])
#comment = #post.comments.create(params[:comment].permit(:name, :body))
redirect_to post_path(#post)
end
def destroy
#post = Post.find(params[:post_id])
#comment = #post.comments.find(params[:id])
#comment.destroy
redirect_to post_path(#post)
end
end
"_comment.html.erb":
<div class="comment clearfix">
<div class="comment_content">
<p class="comment_name"><strong><%= comment.name %></strong></p>
<p class="comment_body"><%= comment.body %></p>
<p class="comment_time"><%= time_ago_in_words(comment.created_at) %> Ago</p>
</div>
<p>
<%= link_to 'Delete', [comment.post, comment],
method: :detele,
class: "button",
data: {confirm: 'Are you sure?'}
%>
</p>
</div>
"_form.html.erb":
<%= form_for([#post, #post.comments.build]) do |f| %>
<%= f.label :name %><br>
<%= f.text_field :name %><br>
<br>
<%= f.label :body %><br>
<%= f.text_area :body %><br>
<br>
<%= f.submit %>
<% end %>
"show.html.erb":
<div id="post_content">
<h1 class="title">
<%= #post.title %>
</h1>
<p class="date">
Submitted <%= time_ago_in_words(#post.created_at) %> Ago
| <%= link_to 'Edit', edit_post_path(#post) %>
| <%= link_to 'Delete', post_path(#post),
method: :delete,
data: { confirm: 'Are you sure?' } %>
</p>
<p class="body">
<%= #post.body %>
</p>
<div id="comment">
<h2><%= #post.comments.count %> Comments </h2>
<%= render #post.comments %>
<h3>Add a comment: </h3>
<%= render "comments/form" %>
</div>
</div>
"posts.rb":
class Post < ApplicationRecord
has_many :comments, dependent: :destroy
validates :title, presence: true
validates :body, presence: true
end
"routes.rb":
Rails.application.routes.draw do
resources :posts do
resources :comments
end
root "posts#index"
end
I really don't know how to fix this. Please help me. Thank you! <3

Can I create beautiful buttons inside a form_for helper?

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' %>

Problems with rails helper link_to concerning class

I'm having difficulties with rails. In fact, I wrote these lines :
<%= link_to :controller => "offers", :action => "get_offer", :offer_slug => offer.friendly_id, {:class => "media"} do %>
.
.
.
<% end %>
My problem is that everything that is inside link_to is getting the css effects of a hyperlink (no padding, gets underlined when hover), instead of custom properties.
It's like the :class property isn't being taken into account.
Just in case, here's the full part :
<<%= link_to :controller => "offers", :action => "get_offer", :offer_slug => offer.friendly_id, {:class => "media"} do %>
<li id="<%= offer.id %>" class="media" style="border: 1px solid #696969">
<div class="col-lg-3" style="margin-bottom:0px; font-size:12px; text-align:center; margin-right:10px;">
<% if offer.subcategory.nil? %>
<img class="media-object" src="<%= asset_path "other-icon.png" %>" style="margin-bottom:5px;">
<% elsif offer.subcategory.category.icon.empty? %>
<% else %>
<img src="<%= asset_path offer.subcategory.category.icon %>" style="margin-bottom:5px; width:110px;">
<% end %>
<br/>
<% if offer.subcategory.present? %>
<b><%= offer.subcategory.category.name %></b><br/> <%= offer.subcategory.name %>
<% else %>
<b>Autres</b><br/> <%= offer.subcategory_other %>
<% end %>
</div>
<div class="media-body">
<!--Titre annonce + type contrat-->
<div style="text-align:right; margin-bottom: 10px;">
<% if offer.id >= #new_limit %>
<span class="label label-warning">New</span>
<% end %>
<span class="label label-success"><%= (offer.max_price * 0.85).ceil %> euros</span>
<span class="label label-success" style="background-color: grey"><%= (offer.customer_objective) %>
succès </span>
</div>
<h4 class="media-heading">
<%= raw(offer.name) %>
</h4>
<p>
<% if offer.description %>
<%= offer.description.split[0..60].join(" ") %>
<% if offer.description.split[0..60].count >= 59 %>
<% end %>
<% end %>
</p>
<% if offer.company_context.present? %>
<p>
<%= offer.company_context.split[0..60].join(" ") %>
<% if offer.company_context.split[0..60].count >= 59 %>
<% end %>
</p>
<% end %>
</div>
<div class="offer-tags">
<% offer.offer_tags.each do |offer_tag| %>
<span class="badge"><%= offer_tag.tag.name %></span>
<% end %>
</div>
</li>
<% end %>
Try to wrap the class in curly braces:
<%= link_to :controller => "offers", :action => "get_offer", :offer_slug => offer.friendly_id, { :class => "media" } %>
The Rails link_to helper is pretty flexible and allows a few different call signatures, which can lead to confusion. You are needing this one:
link_to(body, url_options = {}, html_options = {})
Without the wrapping braces, Rails is not clear that :class is in fact an HTML option.
Docs here. I should mention I also dropped your trailing do which implied a block that didn't seem to be there (nor was it needed).
UPDATE
I did not understand that the block was intended as the link body. In that case, the right call signature would be:
link_to(options = {}, html_options = {}) do
# name
end
So, your body is fine, but in your link_to, you want to group the URL options, followed by the HTML options. Plus I think you may need parentheses around the whole call for it to work correctly:
<%= link_to({ :controller => "offers", :action => "get_offer", :offer_slug => offer.friendly_id }, { :class => "media" }) do %>

Class tag automation on form_for? What is the best practice for this syntax?

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.

Rails & Bootstrap Make button inline with text field

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 %>

Resources