RailsCasts Pro episodes are now free!

Learn more or hide this

Recent Comments

Avatar

Totally agree. Really enjoy getting getting a guided look at the rails internals.

Avatar

Hey Thanks Ryan,
Now the stage is all set for a set of Pro (Advanced) screencasts for leveraging SimpleForms with Twitter Bootstrap :)
Keep up the great work!

Avatar

I cannot post all my code here since even with simple_form, my form is quite large, but here is the gist:

ruby
= simple_form_for @contract do |f|
  %h3= "General Information"
  %table
    %tr
      %td
        = f.association :state, :collection => State.all, :include_blank => true
      %td
        = f.input :county_id do
          = f.grouped_collection_select :county_id, State.order(:name), :counties, :name, :id, :name, include_blank: true

Then you use the following coffeescript markup in app/assets/javascripts/contracts.js.coffee file:

javascript
jQuery ->
  counties = $('#contract_county_id').html()
  $('#contract_state_id').change ->
    state_id = $(this).val()
    state = $('#contract_state_id :selected').text()
    options = $(counties).filter("optgroup[label='#{state}']").html()
    if options
      $('#contract_county_id').html(options)
      $('#contract_county_id').parent().show()
    else
      $('#contract_county_id').empty()
      $('#contract_county_id').parent().hide()

So there is nothing that Simple form specific here really. It is the code from aforementioned revised screencast on dynamic menus tweaked for my own simple form.

Avatar

Paul: Make sure you have the line

helper_method :current_user

in /app/controllers/application_controller.rb

Avatar

Does simple form work for dynamic select menus?
http://railscasts.com/episodes/88-dynamic-select-menus-revised
Please if someone has an example, would be very helpful.

Avatar

I am using twitter_bootstrap_form_for in my current project, and it has some issues, this is why I am considering moving to simple_form_for, and this is why I am a bit courious about the advantages of simple_form over twitter_bootstrap_form_for. Thanks!

Avatar
ruby
  <%= simple_form_for @user do |m| %>
    <%= f.simple_fields_for :custom_fields do |c| %>
      <%= c.input :field_key, as: :hidden %>
      <%= c.input :field_value, label: c.object.field_key, input_html: { id: c.object.field_key } %>
    <% end %>
  <% end %>
Avatar

How does fields_for work for simple form?

Avatar

The fields for the password_resets edit form are not validating for me. Has anyone else had this problem?

Avatar

After this Railscast, I decided to try to implementing Bootstrap into a project that has gone halfway without a designer (i.e. the devt did hackish work outside his scope to help beef up the design).

Bootstrap is really good.

I used Less with the Crunch compiler to generate the CSS files instead of all the gem plugins. Spent 2-3 hours restructuring the layout, tweak some color schemes using Crunch and output. Everything worked out in a day =)

Thanks Ryan and Twitter.

Avatar

it may have to do with the version of bootstrap i am running, but the padding modification Ryan suggested, while looking beautiful at wide screens, leaves an icky space on top on narrower media sizes. I used the following instead, which worked with my version:

scss
  // Landscape phones and down
  @media (max-width: 980px) { padding-top: 0px;}

  // Portrait tablet to landscape and desktop
  @media (min-width: 980px) { padding-top: 60px;}

At the moment, by the way, I am preferring the following gem, which provides scss flavored bootstrap, but open to see where the community is coming down. I confess enjoying working in a single preprocessor for all my css.

gemfile
gem 'anjlab-bootstrap-rails', '>= 2.0', :require => 'bootstrap-rails'
Avatar

You can simplify the routes you added to this:

ruby
get 'signup' => 'users#new'
get 'login' => 'sessions#new'
get 'logout' => 'sessions#destroy'

It's shorter and cleaner. The as: option is completely unnecessary since rails will add the path helpers without it.

Avatar

VCR 2.0 is out! Looks like lots of these ideas made it in.

For anyone having issues upgrading:
http://myronmars.to/n/dev-blog/2012/03/vcr-2-0-0-released

Avatar

Figured it out, seems the haml templates don't look as pretty as the erb ones :(

Avatar

Hell Maxim,
You wrote:
"The latter of which I was hoping Ryan would cover, but topic is too wide, and this cast is great still"

I second that. Hey Ryan, there is room for Bootstrap Pro Advanced episode :)

Avatar

Very good. Would you care to share details? Avoid me the hassles. Thanks in advance.

Avatar

It is definitely a better strategy to use mixins as advocated in the article. This is a Twitter Basics screencasts so Ryan kept more advanced concepts out for simplicity.

Avatar

Does gon work with jruby-1.6.5 ? Thanks

Avatar

Hey Ryan, great post!
I'm just having a har time to figure out, how unicorn.rb should be with RVM ? Could you give us an example?

Avatar

Found it and can't delete my post. Sorry
I used this - "value: "%02d" % (index+1).to_s"

Avatar

What would be the best way to store the position with double digits ; set 01 instead of 1, 02 instead of 2 and so on until 10.

Thanks for another great one Ryan!

Avatar

A straightforward way to avoid the code smells, particularly redundant logic scattered through the code manipulating sessions hash (and perhaps later on the cookies hash) is to use a non-database-backed model (tying back to recent ActiveAttr podcast) that handles Sessions, which persists to whichever hash you find suitable to send it. Thus, your controller can look like:

ruby
def create
  @session = Session.new(params[:session]
  if @session.on(session).save
    redirect_to root_url, notice: "Logged in!"
  else
    flash.now.alert = "Email or password is invalid"
    render "new"
  end
end

and then, of course, you can use the form generators on Session.new, instead of hand-coding the, albeit simple form. Note that using simple_form_for, particularly when using something like twitter bootstrap is MUCH easier on the eyes. Finally, your controller code to check for current user simply uses Session.new.on(session).current_user, and now everything is abstracted and DRY in the fat model with skinny controllers.

Even nicer, you can now test the heck out of the Session model in isolation from the controllers, making the acceptance and integration tests a piece of cake, without any need to mess around with hacks to access controller-level code.

Just a thought.

Avatar

Is there a way to use Twitter Bootstrap without JavaScript runtime? Because I am developing on a windows machine without a js runtime, so I always do rails new app --skip-sprocket, is there a way to only turn off the js part of the asset pipeline but still use less and sass?

Avatar

client_side_validations gem is not working with simple_form and bootstrap 2.
Does anyone know any alternative to client_side_validations ?

Avatar

Something is wrong, I am running the rails g bootstrap:themed but I don't get the nice action buttons in the list view and when I click on an item, the delete action button is not red. Any ideas? :/

Looking at the source, the action buttons are just = link_to "Show", oximetry_path(oximetry), etc in link view. My bootstrap version is 2.0.3.

Avatar

thanks ryan for this cast. awesome as usual!

I implemented bootstrap-sass gem on an existing app and i'm running into an issue i have not been able to solve yet:

$(document).ready() does not seems to work.
in the application.js
i require:
jquery
jquery-ujs
bootstrap
my js files.

Someone got an idea on what I did wrong.

Thanks a lot!

Avatar

Bharat, I found out it was working (sortof) but Bootstrap v2.0 seems to not work well with changing column and gutter widths without also modifying additional fields of which I'm unsure of. I worked my design around the bootstrap constraints, so I'm good.

Avatar

Do you think is a good idea to directly embed the Bootstrap classes in your HTML? See this blog post for a better(?) approach

Avatar

Why you no create a task to run the whenever --write-crontab?

Avatar

You are probably right, see this blog post from one of my work colleagues

Avatar

Just add gem 'less-rails' to your Gemfile and config.less.compress = true to your application.rb assets:precompile will work just fine.

Avatar

thanks ryan!

i had to import the selective components this way to get it working.

@import "twitter/bootstrap/reset.less";

Avatar

Would anyone know the equivalent fix for rvm (i.e ruby-local-exec) below:

rbenv local 1.9.2-p290
sed -i 's/env ruby/env ruby-local-exec/' bin/*

Avatar

I've been using twitter_bootstrap_for_for for many months now. Works very well

Avatar

I don't see how that will work with multiple token input fields on one page. They will all be loading the same .json data.

Avatar

has anyone gotten this to work with multiple fields that each need to pull on their own .json?

I have three fields that I'm trying to use this with: streets, buildings, and units.

Avatar

Thank you very much, that seems really useful

Avatar

I have to investigate if it's powerful for the policies of the application I'm designing but the DSL seems flexible enough. I'll look at the gem's documentation, thank you very much as always ;)

Avatar

Thanks, I'll try it later. I've seen your comment in this thread but I was wondering if there's a way without using bootstrap-sass. If not then I guess I have to use it.

Thanks again =)

Avatar

So I figured out most of my errors. I wasn't setting the all the values I needed to.

I set
att_accesible for crop_x , crop_y, crop_w, crop_h 
didnt set
attr_accessor for all these same values 

I guess I thought these were the same as rails seems to understand connections like user and users - dumb I know, I'm new to ruby and rails but railscasts has been teaching my quite a bit.

My only remaining issue is with the preview function which I have also asked in a stackoverflow question in great detail. But basically the image appears with a second image inside the crop window that stretches and skews as the resizing handles are moved. Any help would be greatly appreciated as this issue has haunted me for about a week now. Thanks!

Avatar

How did you fix it ? I have the exact same problem.
Thanks

Avatar

Seems like it runs server-side, see 2:49 in the video (the gem includes therubyracer). Server-side javascript, ugh! Guess I'll go with bootstrap-sass.

Avatar

Javier, I am, along with Bootstrap-Sass. See my above comment for an initializer that works, when used alongside the Formtastic-bootstrap gem (sorry, dont know for simple_form)

Avatar

So we shouldn't use Bootstrap because the Twitter guys chose to omit semicolons where possible? Really? Or did I miss the /s somewhere?

Avatar

Wonderful, the episodes about Rack are very interesting, they make me feel more confident with my code. Thanks ;-)

Avatar

Hi all, I am using bootstrap in one of my project. And do have concerns to it, Its god that Rayan has started an episode related to it.

Can any one look at http://stackoverflow.com/questions/9427534/rails-3-1-asset-pipeline-and-large-project and answer to it.

So that it can be a guideline for people using the SASS,Compass,Bootstrap all together on a large projects.

It will be a great favor for me.