Search code examples
ruby-on-railsformstwitter-bootstraptwitter-bootstrap-rails

Twitter bootstrap rails simple form formatting

I'm trying to reformat the simple default devise login screen with twitter bootstrap simple form and I'm having major issues.

screenshot

Here is my code:

<h2>Sign in</h2>

<%= simple_form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => {:class => "form-horizontal"}) do |form| %>

<%= form.input :email, :autofocus => true %>
<%= form.input :password %>
<%= form.input :remember_me, :as => :boolean if devise_mapping.rememberable? %>
<%= form.button :submit, 'Sign in', :class => 'primary'%>
<% end %>

<%= render "links" %>

I can get the spacing between the labels and input fields to be correct if I add

.form-horizontal .controls {
  margin-left: 160px;
}

to my application.css file, but I don't see this anywhere in their sample app here https://github.com/rafaelfranca/simple_form-bootstrap and am really confused where the proper formatting is coming from.

I have almost the same code as this guy https://github.com/rafaelfranca/simple_form-bootstrap/issues/6 but his code is older I think. I am using simple form 2.0.2 and I installed bootstrap with twitter-bootstrap-rails 1.4.3. I also installed and uninstalled a couple other twitter bootstrap gems if theres any chance that's messing things up.

Edit: here is my produced code if that helps

Sign in

<form accept-charset="UTF-8" action="/admins/sign_in" class="simple_form form-horizontal" id="new_admin" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="xxx" /></div>

<div class="control-group email optional"><label class="email optional control-label" for="admin_email">Email</label><div class="controls"><input autofocus="autofocus" class="string email optional" id="admin_email" name="admin[email]" size="50" type="email" value="" /></div></div>
<div class="control-group password optional"><label class="password optional control-label" for="admin_password">Password</label><div class="controls"><input class="password optional" id="admin_password" name="admin[password]" size="50" type="password" /></div></div>
<div class="control-group boolean optional"><label class="boolean optional control-label" for="admin_remember_me">Remember me</label><div class="controls"><input name="admin[remember_me]" type="hidden" value="0" /><label class="checkbox"><input class="boolean optional" id="admin_remember_me" name="admin[remember_me]" type="checkbox" value="1" /></label></div></div>
<input class="btn primary" name="commit" type="submit" value="Sign in" />
</form>


<a href="/admins/password/new">Forgot your password?</a><br />
Solution

  • Wow that was painful. It turns out there is an error in the twitter-bootstrap-rails gem https://github.com/seyhunak/twitter-bootstrap-rails/issues/324

    If you have this problem I recommend uninstalling that gem and everything associated with it and following these directions http://ruby.railstutorial.org/chapters/filling-in-the-layout?version=3.2#sec-custom_css

    to get started. Summary of link:

    1. Install 'bootstrap-sass' gem
    2. Add a custom.css.scss file with "@import 'bootstrap';" and you're good to go.