Hello,
I am using Simple Form with Twitter Bootstrap, but I cannot get the
elements of the form to line up on the same horizontal line using the
Bootstrap class 'form-inline' (
http://twitter.github.com/bootstrap/
base-css.html#forms). I can get it to function the way that I want
using the Rails 'form_for' but I cannot do it using
'simple_form_for' (yet).
I am sure there is a way to accomplish this, but I just cannot seem to
figure out what it is. (Also, I would like to be able to group some
fields with a stacked format and some others with an inline format
[one after the other on the same line]).
I am a newbie, so I apologize if this is a stupid question.
Any help you can give will be much appreciated.
Abracos,
malikilam
The code for the successful use of 'form_for' with Bootstrap is:
=form_for(@patient, :html => {:class => 'form-inline'}) do |g|
=g.label :first_name
=g.text_field :first_name
=g.label :middle_name
=g.text_field :middle_name
=g.label :last_name
=g.text_field :last_name
Which yields form elements arranged inline as follows:
<form accept-charset="UTF-8" action="/patients" class="form-inline"
id="new_patient" method="post">
<div style="margin:0;padding:0;display:inline"><input name="utf8"
type="hidden" value="✓" />
<input name="authenticity_token" type="hidden"
value="3zClFqnnxr7js5BlSqEfZBisHW0yBHn17QSsENa0ams=" /></div>
<label for="patient_first_name">First name</label>
<input id="patient_first_name" name="patient[first_name]"
size="30" type="text" />
<label for="patient_first_name">First name</label>
<input id="patient_first_name" name="patient[first_name]"
size="30" type="text" />
<label for="patient_first_name">First name</label>
<input id="patient_first_name" name="patient[first_name]"
size="30" type="text" />
</form>
The code i have used for the 'simple_form_for' is as follows:
=simple_form_for(@patient, :html => {:class => 'form-inline'}) do |f|
=f.input :first_name
=f.input :middle_name
=f.input :last_name
Which yields:
<form accept-charset="UTF-8" action="/patients" class="simple_form
form-inline" id="new_patient" method="post" novalidate="novalidate">
<div style="margin:0;padding:0;display:inline"><input name="utf8"
type="hidden" value="✓" />
<input name="authenticity_token" type="hidden"
value="3zClFqnnxr7js5BlSqEfZBisHW0yBHn17QSsENa0ams=" /></div>
<div class="control-group string required"><label class="string
required control-label" for="patient_first_name"><abbr
title="required">*
</abbr> First name</label><div class="controls"><input
class="string required" id="patient_first_name"
name="patient[first_name]"
size="50" type="text" /></div></div>
<div class="control-group string optional"><label class="string
optional control-label" for="patient_middle_name"> Middle name</
label>
<div class="controls"><input class="string optional"
id="patient_middle_name" name="patient[middle_name]" size="50"
type="text" />
</div></div>
<div class="control-group string required"><label class="string
required control-label" for="patient_last_name"><abbr
title="required">*
</abbr> Last name</label><div class="controls"><input
class="string required" id="patient_last_name"
name="patient[last_name]"
size="50" type="text" /></div></div>
</form>