I'm creating a simple sign_up form for new users on my site. I have ran the install for simple_form bootstrap...
rails g simple_form:install --bootstrap
However, it's still not showing up and rendering as a normal simple_form.
Here is my form code:
<h2>Sign up</h2>
<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name ), :html => {:class => 'form-horizontal' }) do |f| %>
<%= f.error_notification %>
<%= f.input :username, :required => true, class: "form-control"%>
<%= f.input :first_name, :required => true, class: "form-control" %>
<%= f.input :last_name, :required => true, class: "form-control" %>
<%= f.input :twitter, class: "form-control", type: "text", placeholder: "Username" %>
<%= f.input :bio, class: "form-control" %>
<%= f.input :email, :required => true, :autofocus => true, class: "form-control" %>
<div class="form-actions">
<%= f.button :submit, "Sign up", class: "btn btn-primary btn-sm" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
Not sure what I'm doing wrong here. Thanks in advance.
The sample application here mentions how you need to download Bootstrap separately (they use curl) and place it in vendor/assets/stylesheets/bootstrap.css.
Please try that.
It sounds like Bootstrap is not installed in your application or maybe you are trying to use Bootstrap 3. At the time I typed this on 2013-10-13, Simple Form did not support Bootstrap 3. See here for more details.
So that means you need to add Bootstrap 2.x to your application and Vidya has provided some good direction already.
If you are interested in using a gem to add Bootstrap 2.x, then I've provided instructions for twitter-bootstrap-rails below. Be sure to review their readme as well in case I omitted something.
In your gemfile add:
gem "twitter-bootstrap-rails", :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
Then at the rails console for your project run (I've assumed you want less support):
bundle install
rails generate bootstrap:install less
Depending on whether you want a fixed or static layout use one of the two lines below:
rails g bootstrap:layout application fixed
rails g bootstrap:layout application fluid
Finally, edit your application.css file (found in app/assets/stylesheets) so it has 'require bootstrap_and_overrides similar to the example below:
*= require_self
*= require bootstrap_and_overrides
*= require_tree .
I'm pretty sure this happens by default now but you might also want to confirm that you have 'require twitter/bootstrap in your application.js as well (found in app/assets/javascripts). An example from a project of mine is below:
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .
If it still doesn't work and you added this gem. Kindly let me know what version of ruby, rails, simple_form and twitter-bootstrap-rails you are using.
Related
I have upgraded my rails app from 3.2.2 to 5.1.4. I updated tinymce version to 4.7.9. But on every page i am getting this error on console and tinymce is not working there.
Error on console:
Uncaught Error: Could not find control by type: button
Gemfile
gem 'jquery-rails'
application.js
//= require tinymce-jquery
instruction/_form
<%= tinymce_assets %>
<p>
<%= f.label :mt_inst %><br />
<%= f.text_area :mt_inst, :class => "tinymce", :rows => 40, :cols => 120 %>
</p>
<%= tinymce %>
I checked this is giving error to Rails 5 app as well so you must download this tinymce-jquery from
https://cloud.tinymce.com/stable/tinymce.min.js
Then manually put it under app/assets/javascripts/ folder and require it with the filename in application.js
Me and my co-workers were testing my web app. And, in the form in my computer/local/dev and server/production it shows the date format dd/mm/yyyy 00:00 and for my coworkers mm/dd/yyyy 00:00 am/pm with the same local chrome settings and computer settings.
why is this?
and how can I change this for all users? if possible.
piece of code:
<div class="mini_jumbotron">
<div class="mini_text">Inicio<%= image_tag("calendar.png", :class => "calendar")%>
</div> <br>
</div>
<%= f.datetime_field :Inicio %>
Try below code:
<%= f.date_field :Inicio, as: :date, value: f.object.try(:strftime,"%d/%m/%Y"), class: 'form-control' %>
You can also use this gem: https://github.com/Nerian/bootstrap-datepicker-rails
on your gemfile.rb
gem 'bootstrap-datepicker-rails'
then bundle install and restart rails server
then add this line to app/assets/stylesheets/application.css
*= require bootstrap-datepicker
and add this line to app/assets/javascripts/application.js
//= require bootstrap-datepicker
and to use this in your form:
<%= f.date_field :Inicio, :id => "datepicker" %>
and add this javascript on the same view of your form
<script>
$('#datepicker').datepicker({format: 'dd/mm/yyyy HH:MM:ss'});
</script>
I am trying to use Dropzone.js to upload files within my Rails app.
It seems that if I use the standard setup, the entire form becomes an image upload field. However, my form contains other fields as well. I only want to use Dropzone.js in a file_field area.
Steps I've used are:
Gemfile
gem 'rails-assets-dropzonejs', source: 'https://rails-assets.org'
application.js
//= require dropzonejs
application.css
*= require dropzonejs
_form.html.erb
<%= form_for #activity, html: {class: 'ui form'} do |f| %>
<!-- Fields like this one don't need to be dropzone fields -->
<div class="field">
<%= f.label :name %>
<%= f.text_field :name %>
</div>
<!-- The following field does -->
<div class="field">
<%= f.label :gallery_images %>
<%= f.file_field :gallery_images, multiple: true, class: 'drop' %>
<%= f.hidden_field :gallery_images_cache %>
</div>
<% end %>
activities.coffee
$ ->
$('.drop').dropzone({ url: "/activities/post" });
As you can see, I'm trying to bind Dropzone to the 'drop' class which I've attached to the file_field. However, this doesn't seem to work correctly and I am seeing no errors in the console.
Anyone have an idea how I'd get Dropzone.js to work for a file_field within a Rails form? Or can I only bind it to the entire form?
Any help is much appreciated! Thanks!
You need to permit the :file param. Most probably there will be code something along the line of
private
def activities_params
params.permit(:name, ...other_params)
end
Add :file to the permit method
private
def activities_params
params.permit(...other_params, :file)
end
I'm trying to use bootstrap-switch-rails on my Rails project, but I can't make it work. I've been mostly following this tutorial.
This is what I tried so far.
Added this in my Gemfile
gem 'bootstrap-switch-rails', '~> 3.0.0'
Added this in the top of my app/assets/stylesheets/custom.scss
#import "bootstrap";
#import "bootstrap3-switch";
#import "bootstrap-sprockets";
/* Rest of the file omitted */
This is my application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require bootstrap-switch
//= require_tree .
My application.css
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
*= require bootstrap-switch3
And finally, the form where I want to use the switch:
<% content_for :head do %>
<script type="text/javascript">
$(function() {
$("input:checkbox").bootstrapSwitch();
});
</script>
<% end %>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= form_for(#consultant) do |f| %>
<%= render 'consultants/consultant_error_messages' %>
<%= f.label :identifier %>
<%= f.text_field :identifier, class: 'form-control' %>
<%= f.label :email %>
<%= f.email_field :email, class: 'form-control' %>
<%= f.label :first_name %>
<%= f.text_field :first_name, class: 'form-control' %>
<%= f.label :last_name %>
<%= f.text_field :last_name, class: 'form-control' %>
<%= f.label :disabled, "Habilitar/Deshabilitar" %>
<%= f.check_box :disabled, :data => {
:size=>'small', 'on-color'=>'success', 'on-text'=>'Habilitar', 'off-text'=>'Deshabilitar'
} %>
<%= f.submit "Guardar", class: "btn btn-primary" %>
<% end %>
</div>
</div>
The checkbox is being shown as a regular checkbox, instead of a switch.
Any ideas on what should I be missing?
Thanks in advance.
Try to replace require bootstrap-switch3 with require bootstrap3-switch in your application.css
Also try executing $("input:checkbox").bootstrapSwitch(); in the console to see the output.
Another user solved the issue writing the HTML instead of using the one generated by Rails: rails 4 : change state issue with Bootstrap Switch
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 %>