I am making a form with simple_form, and I'm trying to get all inputs on the same line (I want all elements to be inline horizontally on the rendered page).
I have googled the problem for some hours, but I couldn't find a solution that works.
The simple_form code:
<%= simple_form_for(#post, :html => {:class => 'form-inline' }) do |f| %>
<%= f.input :link, label: false, placeholder: "here..." %>
<%= f.input :type, as: :radio_buttons, collection: [['<span class="add-on"><i class="icon-on icon-white"></i></span>'.html_safe, '0'], ['<span class="add-on"><i class="icon-off icon-white"></i></span>'.html_safe, '1'], ['<span class="add-on"><i class="icon-on icon-white"></i> + <i class="icon-of icon-white"></i></span>'.html_safe, '2']], item_wrapper_class: 'inline', label: false %>
<%= button_tag(type: 'submit', class: "btn btn-inverse") do %>
<i class="icon-ok icon-white"></i>
<% end %>
<% end %>
Any solution to this?
simple_form creates a form containing a div for each input.
Each div contains a label and an input field
so your css should look like:
.form-inline div { display: inline-block }
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 %>
So this is what I want to do:
<% for x in 6..10 %>
<%= form_for(current_user.responses.new, html:{class: 'col-xs-2 col-md-1 col-lg-1 vcenter center'}) do |f, index| %>
<%= f.text_field :response_value, label: false, :class => "my-width <%= x %>" %>
<% end %>
<% end %>
But it doesn't work. I want to have two classes on the input field, one being a normal css class using html. The other using an erb variable, in this case 'x'.
I've tried
<%= f.text_field :response_value, label: false, :class => "my-width center vcenter", :class => x %>
Which only assigns the second :class, and overrides the first.
How can I assign both these classes ("my-width" and x) to the form input field?
Posting a new answer since Rails4 has a much better way of doing this:
<%= f.text_field :response_value, label: false, class: ["my-width", x] %>
<%= f.text_field :response_value, label: false, :class => "my-width <%= x %>"
Isnt valid ruby syntax. Im suprised your not getting an error.
Use string interpolation:
<%= f.text_field :response_value, label: false, :class => "my-width #{x}" %>
Also its worth noting you should use html classes that are solely a number.
Something like:
:class => "my-width-#{x}"
Is valid.
<%= f.text_field :response_value, label: false, :class => "my-width <%= x %>" %>
This line doesnt really make any sense, since you are putting an erb tag to the string inside an erb tag...
Try
<%= f.text_field :response_value, label: false, :class => "my-width #{x}" %>
In my horizontal form, all of my input elements are aligning properly except for the file inputs.
They take 100% width and are floated to the left.
In my simple_form_bootstrap.rb my wrapper seems to configured properly with the label taking 3 and input taking 9.. but somehow in the generated html, it's not taken into account.
Wrapper:
config.wrappers :horizontal_file_input, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
b.use :html5
b.use :placeholder
b.use :label, class: 'col-sm-3 control-label'
b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
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
Form header:
<%= simple_form_for(#post, html: { class: 'form-horizontal', role: "form", multipart: true },
wrapper: :horizontal_form,
wrapper_mappings: {
check_boxes: :horizontal_radio_and_checkboxes,
radio_buttons: :horizontal_radio_and_checkboxes,
file: :horizontal_file_input,
boolean: :horizontal_boolean
}) do |f| %>
<%= f.error_notification %>
Form inputs in my form
<%= f.fields_for :assets do |builder| %>
<%= builder.input :attachment, as: :file, :label => "Image:" %>
<% end %>
Generated html
<div class="form-group file optional post_assets_attachment">
<label class="file optional control-label" for="post_assets_attributes_0_attachment">
Image:</label>
<input class="file optional form-control" id="post_assets_attributes_0_attachment" name="post[assets_attributes][0][attachment]" type="file">
</div>
How come the simple_form settings don't apply to the file inputs?
Found my answer in the simple-form 3.1.0.rc1 sample application.
Looks like specifying the wrapper in the form header didn't work for some reason. Had to apply it directly to the input.
I changed:
<%= builder.input :attachment, as: :file, :label => "Image:" %>
to
<%= builder.input :attachment, as: :file, :label => "Image:", wrapper: :horizontal_file_input %>
And it works perfectly now.
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 %>
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') %>