I am using SimpleForm and Twitter Bootstrap in two Rails 3.2 projects. Unfortunately, my forms are not rendering properly in one of the projects.
All relevant gems are the same versions.
The one that is presenting correctly has fields that look like this:
<form id="new_user" class="simple_form form-horizontal" novalidate="novalidate" method="post" action="/users" accept-charset="UTF-8" name="new_user">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8"> <input type="hidden" value="I/WorRCjNpv7gnccGkL6/LETTgn6ao6Ycrgm0ky2slM=" name="authenticity_token">
</div>
<div class="control-group string required">
<label class="string required control-label" for="user_first_name"><abbr title="required">*</abbr> First name</label>
<div class="controls">
<input id="user_first_name" class="string required" type="text" size="50" name="user[first_name]">
</div>
</div>
<div class="control-group string required">
<label class="string required control-label" for="user_last_name"><abbr title="required">*</abbr> Last name</label>
<div class="controls">
<input id="user_last_name" class="string required" type="text" size="50" name="user[last_name]">
</div>
</div>
<div class="control-group email required">
<label class="email required control-label" for="user_email"><abbr title="required">*</abbr> Email</label>
<div class="controls">
<input id="user_email" class="string email required" type="email" size="50" name="user[email]">
</div>
</div>
<div class="control-group password required">
<label class="password required control-label" for="user_password"><abbr title="required">*</abbr> Password</label>
<div class="controls">
<input id="user_password" class="password required" type="password" size="50" name="user[password]">
</div>
</div>
<div class="control-group password optional">
<label class="password optional control-label" for="user_password_confirmation">Password confirmation</label>
<div class="controls">
<input id="user_password_confirmation" class="password optional" type="password" size="50" name="user[password_confirmation]">
</div>
</div>
<div class="control-group boolean optional">
<label class="boolean optional control-label" for="user_admin">Admin</label>
<div class="controls">
<input type="hidden" value="0" name="user[admin]"> <label class="checkbox"><input id="user_admin" class="boolean optional" type="checkbox" value="1" name="user[admin]"></label>
</div>
</div>
<div class="control-group string required">
<label class="string required control-label" for="user_company"><abbr title="required">*</abbr> Company</label>
<div class="controls">
<input id="user_company" class="string required" type="text" size="50" name="user[company]">
</div>
</div>
<div class="form-actions">
<input class="btn btn-primary" type="submit" value="Create User" name="commit"> <a class="btn" href="/users"><span class="translation_missing" title="translation missing: en.helpers.links.cancel">Cancel</span></a>
</div>
</form>
while the one that is not correct gets rendered like this:
<form id="new_user" class="simple_form form-horizontal" novalidate="novalidate" method="post" action="/users" accept-charset="UTF-8" name="new_user">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8"> <input type="hidden" value="TR4q4W8cEl82hI6+bebVsoYp8WD3k2xsyhhf1UXzCYg=" name="authenticity_token">
</div>
<div class="input string required">
<label class="string required control-label" for="user_first_name"><abbr title="required">*</abbr> First name</label> <input id="user_first_name" class="string required" type="text" size="50" name="user[first_name]">
</div>
<div class="input string required">
<label class="string required control-label" for="user_last_name"><abbr title="required">*</abbr> Last name</label> <input id="user_last_name" class="string required" type="text" size="50" name="user[last_name]">
</div>
<div class="input email required">
<label class="email required control-label" for="user_email"><abbr title="required">*</abbr> Email</label> <input id="user_email" class="string email required" type="email" size="50" name="user[email]">
</div>
<div class="input password required">
<label class="password required control-label" for="user_password"><abbr title="required">*</abbr> Password</label> <input id="user_password" class="password required" type="password" size="50" name="user[password]">
</div>
<div class="input password optional">
<label class="password optional control-label" for="user_password_confirmation">Password confirmation</label> <input id="user_password_confirmation" class="password optional" type="password" size="50" name="user[password_confirmation]">
</div>
<div class="input boolean optional">
<input type="hidden" value="0" name="user[admin]"> <label class="boolean optional control-label checkbox" for="user_admin"><input id="user_admin" class="boolean optional" type="checkbox" value="1" name="user[admin]"> Admin</label>
</div>
<div class="form-actions">
<input class="btn btn-primary" type="submit" value="Create User" name="commit"> <a class="btn" href="/users"><span class="translation_missing" title="translation missing: en.helpers.links.cancel">Cancel</span></a>
</div>
</form>
I have followed the identical steps (as far as I know) on both projects. Why is Twitter Bootstrap causing the two to render differently? Or is it SimpleForm?
I found the problem, although I’m still not sure why it happened. This was indeed a SimpleForm problem rather than a Twitter Bootstrap problem.
The config/initializers/simple_form.rb files were generated differently between the two. I am not sure why.
I did get some errors during installation that were thrown by MiniTest.