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;
}
Related
I have a rails 4 app with simple form and bootstrap.
I have checkbox elements in my form. I want to align the check box to be vertically aligned with the content in other fields. At the moment the check box is further left than the rest of the content in other fields.
For example:
<%= f.input :experiment, :as => :boolean, :label => false, inline_label: 'Do you want experiment logs or methods?' %>
Does anyone know how to make the vertical alignment uniform so that checkboxes are not out to the left of the rest of the form elements?
Thank you
To expand on the above,
I'd like the checkbox to be left aligned in line with the left edge of the other form elements. At the moment, it is further left (like there is some kind of negative margin on that check box element).
I'd like all three of these field inputs to be flush at the left alignment. At the moment, the check box in the two boolean elements is further left than the third text field:
<%= f.input :survey, :as => :boolean, :label => false, inline_label: 'Do you need survey responses?' %>
<br><br>
<%= f.input :survey_link, label: 'Where is your survey?', :label_html => { :class => 'question-data' }, placeholder: 'Include a link to your survey', :input_html => {:style=> 'width: 650px; margin-top: 20px', class: 'response-project'} %>
<br>
<%= f.input :experiment, :as => :boolean, :label => false, inline_label: 'Do you want experiment logs or methods?' %>
As doc suggested here http://montrezorro.github.io/bootstrap-checkbox/ You should have data-label in your input so change your input like this:
<%= f.input :experiment, :as => :boolean, :label => false, :input_html => { :'data-label' => 'Do you want experiment logs or methods?' } %>
If you want prepend then :
<%= f.input :experiment, :as => :boolean, :label => false, :input_html => { :'data-label-prepend' => 'Do you want experiment logs or methods?' } %>
I made a custom wrapper like this:
config.wrappers :inline_checkbox, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
b.use :html5
b.optional :readonly
b.wrapper tag: 'div', class: 'col-sm-10 col-sm-offset-2' do |ba|
ba.wrapper tag: 'div', class: 'checkbox' do |baa|
baa.use :input
end
#ba.use :input
ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' }
end
end
In my case I wanted a simple inline checkbox with the label to the right to place below another form element. You may need to play with the col-sm-10 col-sm-offset-2. This goes in your SimpleForm initializer (or make a separate one line I did to avoid breaking things in the original). Also you need to restart your app to see the changes take effect.
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 %>
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' }
been trying to style my button_to button, however with no luck.
I've had a look in the CSS file and used
#button {color:red;}, button {color:red;} and .button {color:red;} but to no avail for all of them.
I also have this in my HTML.ERB file <%= button_to 'Compare DB',:action => "compare", :id => 'button' but that doesn't help.
Is there any reason why that doesn't work?
The CSS stylesheet is linked to the Rails app, as I tried changing the value for the table so that's not the issue.
Been trying for a while now, still can't figure out the solution.
You can use style inline
<%= button_to 'Compare DB',:action => "compare", :id => 'button', {:style => "background: color:red; } %>
or you can use css clas like
<%= button_to 'Compare DB',:action => "compare", :id => 'button', {:class => "button"} %>