I'm trying to build a rails app and simple_form looks to be a really useful gem. Problem is that I am using twitter bootstrap css to do the styling and the simple_form doesn't allow you to specify the layout of the html.
Can anyone tell me how I can conform the simple_form html into the format bootstrap css wants?
Note: This answer only applies to SimpleForm < 2.0
Start with this in config/initializers/simple_form.rb:
SimpleForm.form_class = nil
SimpleForm.wrapper_class = 'clearfix'
SimpleForm.wrapper_error_class = 'error'
SimpleForm.error_class = 'help-inline'
Then there's space missing between the label element and the input, which you can add with this:
label {
margin-right: 20px;
}
There's probably more, but it's a start.
Simple form 2.0 is bootstrap-aware:
rails generate simple_form:install --bootstrap
I recently had the same problem and tried out the combination of bootstrap-sass and formtastic-bootstrap.
It works with the exactly same code as the code for formtastic and shows even error messages as expected.
bootstrap-sass also works with Rails 3.1 Asset Pipeline and Rails 3.0. formtastic-bootstrap is tested with RSpec so I think this is a nice way to go!
I wrote a gem to do exactly this. It's not simple_form, but it should work fine side-by-side: twitter_bootstrap_form_for.
Here's the full config (config/initializers/simple_form.rb):
SimpleForm.setup do |config|
config.hint_class = 'help-block'
config.error_class = 'help-inline'
config.wrapper_class = 'clearfix'
config.wrapper_error_class = 'error'
config.label_text = lambda { |label, required| "#{label} #{required}" }
config.form_class = nil
end
simple_form allows for a css class (Passing in :html => {:class => nil} will result in only a "simple_form" class.).
n.b. This was added on 7/25/2011 so many existing downloads and documentation will not have it. You could also wrap it in a div that specifies a style.
You can also always style an individual element with code such as
<%= f.input :username, :label_html => { :class => 'my_class' } %>
I found this, seems working fine https://github.com/rafaelfranca/simple_form-bootstrap don't known about tight integration
If you use SimpleForm 1.5 the authors of the gem provide you with the required configuration instructions here: https://github.com/plataformatec/simple_form/wiki/Twitter-Bootstrap-integration
In this railscast: http://railscasts.com/episodes/329-more-on-twitter-bootstrap, you can see how to customize simple_form with twitter bootstrap (skip to 3:05).
terminal :
rails g simple_form:install --bootstrap
model/_form.html.erb :
<%= simple_form_for #product, :html => { :class => 'form-horizontal' } do |f| %>
<fieldset>
<legend><%= controller.action_name.capitalize %> Product</legend>
<%= f.input :name %>
<%= f.input :price %>
<div class="form-actions">
<%= f.submit nil, :class => 'btn btn-primary' %>
<%= link_to 'Cancel', products_path, :class => 'btn' %>
</div>
</fieldset>
<% end %>
Related
This is my code:
<%= simple_form_for [:backend, #department] do |f| %>
<%= f.input :parentid, input_html: { class: 'form-control' } %>
<%= f.input :name, input_html: { class: 'form-control' } %>
<%= f.button :submit %>
<% end %>
This is my form and I want to change the submit text, now the text is create department, so I tried:
zh-CN:
simple_form:
helpers:
submit:
department:
create: "新建部门"
update: "保存编辑"
but nothing changed. How can I change it?
I add a gem i18n-debug, then I restart server and flash the page. Look the terminal log , I know what is the problem。
enter image description here
so, after zh-CN is helpers, not simple_form
Bruce Wayne give excellent answer.
But I'v got error in i18n-debug:
private method `prepend' called for I18n::Backend::Simple:Class
(NoMethodError)
on debug.rb
I changed
Backend::Simple.prepend(Debug::Hook)
on
Backend::Simple.send :prepend, Debug::Hook
and it works fine!
Or you can use patched gem in your Gemfile:
gem 'i18n-debug', github: 'robotex82/i18n-debug', branch: 'robotex82-patch-1'
from https://github.com/robotex82/i18n-debug/tree/robotex82-patch-1
i18n_debug_page provides a UI for i18n debug info, it looks like as below:
I'm trying to get two labels for one check box as described in Twitter Bootstrap's documentation. (see http://twitter.github.com/bootstrap/base-css.html#forms --> horizontal forms --> checkbox (below text input))
So what I want to display is a label for the description on the left, the check box itself and a hint right next to it on the right.
The standard implementation of twitter bootstrap in simple_form gem creates a <p> tag for displaying the hint since it tries to be consistent for all kinds of inputs.
I now want to create a custom wrapper for "bootstrap checkboxes" in the simple_form initializer but I just cannot figure out how to solve this.
This is how I currently implemented it using bare rails (erb):
<div class="control-group">
<%= f.label :recurring, :class => 'control-label' %>
<div class="controls">
<%= f.label :recurring, :class => 'checkbox' do %>
<%= f.check_box :recurring %>
<%= t('.recurring_hint') %>
<% end %>
</div>
</div>
Can you help me or at least try to explain how these custom wrapper thing works? Thank you!
Edit: Let me ask my question more precisely: Can I use simple_form's wrappers API to use a label as a wrapper?
Solution:
Update to newest version of simple_form (2.0.2, had 2.0)
Override BooleanInput:
app/inputs/boolean_input.rb
class BooleanInput < SimpleForm::Inputs::BooleanInput
def input
if nested_boolean_style?
template.label_tag(nil, :class => "checkbox") {
build_check_box + inline_label
}
else
build_check_box
end
end
end
_form.html.erb
Call in template:
<%= f.input :recurring, :inline_label => t('.recurring_hint') %>
With latest simple_form, the option is available out of the box.
You can install simple_form with bootstrap suport, so you don't need to write the wrappers like control-groups, etc.
Check this link on installation:
https://github.com/plataformatec/simple_form#twitter-bootstrap
What you need to do is just run the command:
rails generate simple_form:install --bootstrap
In this page you can see some examples, including horizontal checkboxes with bootstrap and simple_form: http://simple-form-bootstrap.plataformatec.com.br/articles/new
If you really want to use it the way you are doing, you need to add the class "inline" along with the "checkbox" on the label.
<%= form_for #post.comments.new do |f| %>
Name:<%= f.text_field :name %><br/>
Email:<%= f.text_field :email %><br/>
Body:<%= f.text_area :content %><br/>
<%= submit_tag "Comment" %>
<% end %>
I need to delete/remove/sanitize <script>..</script> and <style>..</style> tags.
Other option is if there any script,style tags then the input field will be considered as empty. And then the comment will not be saved.
How can i remove those tags and the code inside those tags? And how can i remove html tags too and the contents inside html tags?
I've been using sanitize for this exact purpose. It's been working great.
Add a constant to your app:
YourApp::SANITIZE_FILTER = {
:remove_contents => ['script']
}
Then you can add a helper method:
def sanitize_content(content)
content = Sanitize.clean(content, YourApp::SANITIZE_FILTER)
end
As far as I know, nothing in Rails 3 can do this. Use the sanitize gem.
Add gem 'sanitize' to your Gemfile, and run bundle install. That alone should do it.
Use SanitizeHelper
string = '<span id="span_is"><br><br><u><i>Hi</i></u></span>'
strip_tags(string) #This Will give you "Hi"
Just upgraded to rails 3.1 and now my form_tag doesn't work anymore, I don't get any errors at all?
<% form_tag({:action => 'search'}, :remote => true) do %>
<%= select_tag "prod_id", options_for_select(["-"]) %>
...
<% end %>
Have something dramatically changed so I need to change my code?
Thanks in advance
Code blocks in your views (like form_for, for instance) now need to use the <%= %> syntax instead of <% %>.
Change the first line of your code to look like this:
<%= form_tag({:action => 'search'}, :remote => true) do %>
and you should be good to go.
As a note, I think this change actually came about in one of the Rails 3.0 betas. Check out http://asciicasts.com/episodes/208-erb-blocks-in-rails-3 for a bit of documentation on it.
How to upload a image file using ajax by using prototype.js plugin, I need to display those image after it is uploaded please help to solve this problem.
Thanks
You will need something on the server, too.
I recommend using paperclip for storing the files on your server.
Once you have it set up, you should make your ajax generate one form with a "file" field. Also, remember that the form must be multipart.
<% form_for #picture, :html => { :multipart => true } do |f| %>
<%= f.file_field :file %>
<%= f.submit "Submit" %>
<% end %>
If you just need to upload one file, you probably don't need full AJAX - only plain javascript - for showing/hiding the form. Like this:
<%= link_to_function 'Show/Hide image upload') do |page|
page.visual_effect :toggle_blind, 'upload_image'
end
%>
<div id='upload_image' style='display:none'>
<% form_for #picture, :html => { :multipart => true } do |f| %>
<%= f.file_field :file %>
<%= f.submit "Submit" %>
<% end %>
</div>
Notice that for hiding/showing the div I'm using a Scriptaculous effect, not just prototype - scriptaculous gets included by default on rails anyway.
you can use remote_form_for with a file upload plugin like attachment_fu or paperclip and then render the image back on the view once it is uploaded. May be using update_page in controller.
https://github.com/JangoSteve/remotipart
Remotipart is a Ruby on Rails gem enabling AJAX file uploads with jQuery in Rails 3.0 and Rails 3.1 remote forms. This gem augments the native Rails jQuery remote form functionality enabling asynchronous file uploads with little to no modification to your application.
gem 'remotipart', '~> 1.0'
bundle install