Form Fields on the Same Line

Showing 1-8 of 8 messages
Form Fields on the Same Line malikilam 4/27/12 11:00 AM
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>
Re: Form Fields on the Same Line Rafael Mendonça França 4/27/12 11:06 AM
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.
Re: Form Fields on the Same Line malikilam 4/27/12 10:11 PM
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)
Re: Form Fields on the Same Line rocketscientist 4/27/12 10:57 PM
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
Re: Form Fields on the Same Line malikilam 4/28/12 5:46 AM
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
Re: Form Fields on the Same Line Rafael Mendonça França 4/28/12 8:49 AM
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.
 
Re: Form Fields on the Same Line Doug Hall 2/12/13 2:58 PM
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!
Re: Form Fields on the Same Line Carlos Antonio da Silva 2/12/13 3:00 PM
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-simpleform+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 



--
At.
Carlos Antonio