I have a form and I'm setting a field to be required before submitting, however nothing is showing up when I hit the Search button. What do I need to do to style the form?
<%= form_tag search_path, :method => :get, class: "form-search-home" do %>
<%= text_field_tag :q, :class => "term form-control" %>
<%= text_field_tag :loc, :class => "loc form-control", :required => true %>
<%= button_tag :type => :submit, :class => "btn" do %>Search<% end %>
<% end %>
Thanks!
nothing is showing up when I hit the Search button
The problem here is likely a Rails / HTML issue than CSS (as mentioned in your question)
Syntax
As pointed out in the comments, you have a series of problems with your code syntax, specifically with submit_tag & text_field_tag:
<%= form_tag search_path, method: :get, class: "form-search-home" do %>
<%= text_field_tag :q, nil, class: "term form-control" %>
<%= text_field_tag :loc, nil, class: "loc form-control", required: true %>
<%= submit_tag "Search", class: "btn" %>
<% end %>
This should fix any of the syntax issues you have on your form, allowing it to submit. The reason why it doesn't at the moment is likely down to the syntax being incorrect. If you use the above code, it should render the form correctly, allowing you to submit it as required!
--
CSS
CSS is cascading style sheets - meaning they're only meant to style your page. They can't fix any syntax, backend or HTML rendering issues - only how the HTML appears in the browser
If you've still got trouble with your CSS, you'll be best styling the form with the inputs inheriting from the main class styling:
#app/assets/stylesheets/application.css
form {
/* form code */
}
form input.required {
/* required form element styling */
}
Does your form code generate a valid HTML?
As far as I see from documentation, text_field_tag method has three arguments:
text_field_tag(name, value = nil, options = {})
Your example ommits the second argument (value), so may be that is the case. Wonder if this could help:
<%= text_field_tag :loc, nil, :class => "loc form-control", :required => true %>
Related
I'm trying to style a simple quiz. The image that I use is supposed be the background of the checkbox and the value.name should be on top (as a header) with the value.description as text below. Right now everything obviously is displayed next to each other. And I can't figure out a way to change it.
<%= simple_form_for #user_value, :method => 'post' do |f| %>
<%= f.error_notification %>
<%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>
<div class="form-inputs">
<%= f.association :value, label_method: lambda { |value| image_tag(cl_image_path value.photo.key) + "#{value.name} - #{value.description}"} , :label => "Select at least 10 values", as: :check_boxes, input_html: { class: "value-selector" }, item_wrapper_class: 'value-item'%>
</div>
<div class="form-actions">
<%= f.button :submit, "Continue" %>
</div>
<% end %>
I am using Rails 3.1x, SimpleForm 2.1, and Bootstrap 2.2.x, and I want to change the position of the hint text on some of my forms.
Currently if I use code such as the following (this is a simplified version)
<%= simple_form_for #user, :html => { :class => 'form-horizontal' } do |f| %>
<%= f.input :name, :hint => 'this should be your first name' %>
..
..
I will get a form looks like this
However, I would like it to look like this.
Any thoughts?
I am not sure its works well but try this , in your form field add class
<%= f.input :name, :hint => 'this should be your first name' , :class => "someclass"%>
and in application.css
.somecalss
{
width:somevalue;
}
I am writing a form with three text input fields. I have used text_field_tag to create them
<%= text_field_tag(:input_first) %>
<%= text_field_tag(:input_second) %>
<%= text_field_tag(:input_first) %>
Am using bootstrap css. I want to make the second input larger than the first and the third input. How can I achieve that?
I have tried the below, and even more and the input field size is not changing.
first
<%= text_field_tag(:input_second, :input_html => { :class => "input-large"}) %>
second
<%= text_field_tag(:input_second, nil, :class => "input-large") %>
third
<%= text_field_tag(:input_second, nil, :size=> 30) %>
fourth
<span class="input-large">
<%= text_field_tag(:input_second) %>
</span>
What wrong am I doing? Am a beginner in rails/css/html
ps: should I use text_field_tag or text_field ?
Bootstrap utilizes specific classes to control the width of input elements:
In a Rails template, you'd invoke a text_field_tag in the following manner:
<%= text_field_tag('input_second', nil, class: 'input-large') %>
The code below creates a form and styles the "submit" button according to some css ("button"). The problem is, when the page renders, it shows the normal rails submit tag button on top of the customized "button" css. How do I mute or disable the visual aspects of the rails submit tag button while still making it submit the form?
=form_tag new_site_url, :method => :get do
=text_field_tag :homepage,'', type: "text", class: 'text'
%button
=submit_tag "GO!"
Could you do this :
=form_tag new_site_url, :method => :get do
=text_field_tag :homepage,'', type: "text", class: 'text'
=submit_tag "GO!", class: 'button'
and set the css style for the button?
It better to do this :
=form_tag new_site_url, :method => :get do |f|
=f.text_field '', type: "text", class: 'text'
=f.submit "GO!", class: 'button'
Another way is (rails 4.1)
<%= submit_tag("Submit", :class => "btn btn-warning" ) %>
Here is where you go to find answers http://api.rubyonrails.org/
and if you are working in form_for you would do
<%= f.submit("Submit", class: "btn btn-default" ) %>
I'm using old school ruby(1.8.7) and rails(2.3.5)
heres what my submit tags look like for custom css styling :
<%= submit_tag("Edit", :style => "width:30px;") %>
where "Edit" is the text that appears on the button, and "width:30px;" is my styling. you can also cascade the stylings :
<%= submit_tag("Edit", :style => "width:30px;color:blue;") %>
You can add a style key to the hash
<p><%= submit_tag l(:button_apply), :class => 'btn btn-default btn-sm', :name => 'submit', :style => 'margin-left: 42px' %></p>
I'm having problems with my views. I'm using zurb foundation for stylesheets and when I enter wrong input in forms I get the error above the form but the fields containing the errors are not wrapped with red. Looking further into this there is no field_with_errors div wrapper for the input fields. After looking further into this I found out if I use f.input instead of f.text_field I get the correct error wrapping.
As zurb has styles for text_field, text_area etc. I'm using those but I don't get the error div from rails. Is there any good solution to this?
Here I get correct Zurb foundation styling but no field_with_errors div:
.field
= f.label :name
= f.text_field :name, :class => "input-text"
Here I don't get the Zurb styling but the element is wrapped with field_with_errors div:
.field
= f.label :name
= f.input :name, :class => "input-text"
So basicly it seems the f.text_field helper somehow bypasses the Rails view mechanism of providing div classes to show the errors.
f.text_field is the Rails form helper, not simple_form's helper (Since you tagged this with simple-form, I'll assume you are using that). Since simple form only wraps its own attributes with errors, it is ignoring the rails form helper attributes.
What you probably want is
= f.input :name, :as => :string
You also don't need your own label with simple_form either, so we can condense f.label and f.text_field to become:
= f.input :name, :as => :string, :label => "Custom label"
If you leave off the :label attribute, it will default to the name of the symbol, in this case your label will be "Name". With the :label attribute gives you a label titled "Custom Label".
Hope that helps.
If you want to pass class to SimpleForm's input you should use
= f.input :name, :input_html => { :class => 'input-text' }