Form Fields on the Same Line

[malikilam]

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="&#x2713;" />
<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="&#x2713;" />
<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>

[Rafael Mendonça França]

Look at the Wrappers API guide in the README of the project and in the example inside your simple_form.rb initializer and change they or create others as you want.

-- 
Rafael Mendonça França

http://twitter.com/rafaelfranca
https://github.com/rafaelfranca
Sent with Sparrow

[malikilam]

Hey Rafael,

Thanks for your reply. I have spent a couple of hours trying to make
sense of the Wrapper API and the initializer. I haven't had any
success.

I found that it seems somebody else had the same difficulty I am
having: https://github.com/plataformatec/simple_form/issues/450 .

I see that you have a programming business. Could I pay you for a
half hour of your time on skype to walk me through the API and how to
set this up? What is your hourly rate?

Si voce quer, a gente pode falar no portugues.

Thanks,

malikilam

On Apr 27, 2:06 pm, Rafael Mendonça França <rafaelmfra...@gmail.com>
wrote:

> Look at the Wrappers API guide in the README of the project and in the example inside your simple_form.rb initializer and change they or create others as you want.
>
> --
> Rafael Mendonça Françahttp://twitter.com/rafaelfrancahttps://github.com/rafaelfranca

> Sent with Sparrow (http://www.sparrowmailapp.com)

[Grant Sayer]

Hi Malikilam

I had similar issues with Twitter and Simple_Form as described in http://stackoverflow.com/questions/9390469/twitter-boostrap-and-forms-in-rails

Found that once i followed the instructions carefully and then put simple_form gem in with Rails 3.2 plus twitter-bootsrap-rails gem it worked out ok


regards
grant
---
Grant Sayer
grant...@gmail.com

[malikilam]

hey grant,

Thanks for your reply. I finally figured it out.

The one issue that was preventing the form element from displaying
inline was that the html elements inside the form (div and label) had
a display style of 'block' instead of 'inline'.

So, I created a class in my application stylesheet called '.inline':

.inline {display: inline;}

And then I created a new wrapper invoking that '.inline' style on each
element that needed it:

config.wrappers :inline, :tag => 'div', :class => 'control-group
inline', :error_class => 'error' do |b|
b.use :html5
b.use :placeholder
b.use :label, :wrap_with => { :class => 'inline' }
b.wrapper :tag => 'div', :class => 'controls inline' do |ba|
ba.use :input, :wrap_with => { :class => 'inline' }
ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-
inline' }
ba.use :hint, :wrap_with => { :tag => 'p', :class => 'help-
block' }
end
end

It works as needed when using those in conjunction with the 'form-
inline' boostrap styling on the simple_form_for:

=simple_form_for(@patient, :html => { :class => 'form-inline'}) do
|f|

Rafael, obrigado pelo tempo meu irmao. Simple_form e bacana.

malikilam

On Apr 28, 1:57 am, Grant Sayer <grantsa...@gmail.com> wrote:
> Hi Malikilam
>

> I had similar issues with Twitter and Simple_Form as described inhttp://stackoverflow.com/questions/9390469/twitter-boostrap-and-forms...

>
> Found that once i followed the instructions carefully and then put simple_form gem in with Rails 3.2 plus twitter-bootsrap-rails gem it worked out ok
>
> regards
> grant
> ---
> Grant Sayer

> grantsa...@gmail.com

[Rafael Mendonça França]

Hey, malikilam.

Sorry for my sort answer. Seems like that you tried to figurate out how to create a new wrapper and didn't have much success. I tried here and to create inline form I create a new wrapper inside the config/initializers/simple_form.rb file as the following:

  config.wrappers :inline, :tag => false do |b|

    b.use :html5

    b.use :placeholder

    b.use :label

    b.use :input

  end

And I changed my form code to:

=simple_form_for(@patient, :wrapper => :inline, :html => {:class => 'form-inline'}) do |f|

  =f.input :first_name

  =f.input :middle_name

  =f.input :last_name

What I did?

I the div with the class 'control-group' is created by the bootstrap wrapper.

  config.wrappers :bootstrap, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|

So, If I don't want It I can pass `false` for the `:tag` option (if you pass `nil` it will use a div tag by default).

Also, I removed some components that can break your form style, because they generates block tags. Because of this removal your inline form will not shows the errors and hints inline.

      b.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }

      b.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }

And I also removed the 'control' div that wraps the input in the bootstrap wrapper.

    b.wrapper :tag => 'div', :class => 'controls' do |ba|

So now, I have in my initializer file a bootstrap wrapper and an inline wrapper:

  config.wrappers :bootstrap, :tag => 'div', :class => 'control-group', :error_class => 'error' do |b|

    b.use :html5

    b.use :placeholder

    b.use :label

    b.wrapper :tag => 'div', :class => 'controls' do |ba|

      ba.use :input

      ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }

      ba.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }

    end

  end

  config.wrappers :inline, :tag => false do |b|

    b.use :html5

    b.use :placeholder

    b.use :label

    b.use :input

  end

You can change easily across wrappers in two ways.

<%= simple_form_for(@article, :wrapper => :bootstrap) do |f| %>

and

<%= f.input :name, :wrapper => :inline %>

I hope this clarify your doubts.

I'll write a blog post in our blog about this subject. Seems like many users have the same doubts. I know that the wrappers API is not a simple concept and it needs more explanation.

Obrigado pela sua questão. E desculpe novamente.

 

-- 
Rafael Mendonça França

http://twitter.com/rafaelfranca
https://github.com/rafaelfranca
Sent with Sparrow

[Doug Hall]

Can these wrappers be used for simple_fields_for? Like this:

      = f.simple_fields_for (:answers, :wrapper => :inline) do |answer|

        = render 'answer_fields', f: answer

The docs aren't clear on using wrappers.

Thanks!

[Carlos Antonio da Silva]

Yes, by default simple_fields_for inherits the wrapper from simple_form_for, but you can give one as option the same way.

--
You received this message because you are subscribed to the Google Groups "SimpleForm" group.
To unsubscribe from this group and stop receiving emails from it, send an email to plataformatec-simp...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
At.
Carlos Antonio