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.
Related
<div class="dropdown">
...
<%= ff.collection_select :vendor_id, #vendors, :id, :vendor, :include_blank => true, class: "dropdown-menu" %>
...
</div>
I have a form and then I'm using fields_for as shown above to collect input. But I'm unable to see the stylized bootstrap dropdown as illustrated here. What changes should I be making to see the bootstrap stylized dropdown?
from
<%= ff.collection_select :vendor_id, #vendors, :id, :vendor, :include_blank => true, class: "dropdown-menu" %>
to
<%= ff.collection_select :vendor_id, #vendors, :id, :vendor, {:include_blank => true}, {class: "dropdown-menu"} %>
collection_select(object, method, collection, value_method, text_method, options = {}, html_options = {})
I am using devise for authentication in my rails app and I have created the forms using the simple_form gem. I want to customize the login and signup forms using css but can't seem to figure out to target, which class to use and add a line break.
here is what I need to do,
Add a line break after the label and move the asterisk after the label.
customize the input boxes using css
customize the signup button using css
This is how my devise view for signup page looks like,
<div class="formwrapper">
<center>
<h1>Sign up</h2>
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :first_name, :label => 'First Name', required: true, autofocus: true %>
<br>
<%= f.input :last_name, :label => 'Last Name', required: true, autofocus: true %>
<br>
<%= f.input :user_name, :label => 'Username', required: true, autofocus: true %>
<br>
<%= f.input :email, :label => 'Email', required: true, autofocus: true %>
<br>
<%= f.input :password, :label => 'Password', required: true %>
<br>
<%= f.input :password_confirmation, :label => 'Confirm Password', required: true %>
<br>
</div>
<div class="form-actions">
<%= f.button :submit, "Sign up" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</center>
</div>
Ok. This is simple to do.
In your code change this to
<%= f.input :first_name, :label => 'First Name', required: true, autofocus: true %>
THIS :-
<%= f.input :first_name, :label => 'First Name', required: true, autofocus: true , **:class => 'yourcustomclass'** %>
Similarly for the other controls.
Since Devise is an engine, all its views are packaged inside the gem. These views will help you get started, but after some time you may want to change them. If this is the case, you just need to invoke the following generator, and it will copy all views to your application:
rails generate devise:views
If you have more than one Devise model in your application (such as User and Admin), you will notice that Devise uses the same views for all models. Fortunately, Devise offers an easy way to customize views. All you need to do is set:
config.scoped_views = true
inside the config/initializers/devise.rb file.
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 %>
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 }