Improve the `:inline_label` option #585

Closed
rafaelfranca opened this Issue Jun 1, 2012 · 17 comments

5 participants

@rafaelfranca

Today if you use the 'form-vertical' class the label of checkboxes are show below the checkbox.

To fix this issue the user need to do:

<%= f.input :published, as: :boolean, inline_label: true, label: false %>

Related with rafaelfranca/simple_form-bootstrap#19

@carlosantoniodasilva

I'd like to kill :inline_label in favor of that builder thing we've been talking about:

f.input :published, as: :boolean do |b|
  b.input_field + "Label bla bla bla"
end
@andrebras

Hi,

In my humble opinion, when using simple_form with twitter bootstrap the default behavior should be with the checkbox inline, as we can see in their site:

<!-- vertical form -->
<label class="checkbox">
  <input type="checkbox"> Check me out
</label>

<!-- horizontal form -->
<div class="control-group">
  <div class="controls">
    <label class="checkbox">
      <input type="checkbox"> Remember me
    </label>
    <button type="submit" class="btn">Sign in</button>
  </div>
</div>

However, i agree it should have an option to change this behavior, something like:

f.input :published, as: :boolean, inline: false

My point is, when you integrate simple_form with twitter bootstrap you expect it to generate html according with
the framework it is integrating. Looking at twitter bootstrap examples, every form (horizontal, inline, etc...) represents
the checkbox component with the label inline.

@rafaelfranca

I'm not a Twitter Bootstrap user. I neither a big fan of the project.

Since the beginning we as maintainers agree to make possible to people integrate SimpleForm with Twitter Bootstrap. But we also agree that we should not change how SimpleForm works by default because me as a non-Bootstrap user don't want to change my markup to follow the bootstrap integration.

What I want to avoid is add a lot of configuration to SimpleForm only to make it works with Bootstrap. So I'm 👎 to make it generate inline checkboxes by default and I'm 👎 to add a new configuration to it.

the :inline_label options was a quick and dirty solution but I think we will change it in the next releases.

I like the @carlosantoniodasilva suggestion and I want to make it the way that we will work with Bootstrap or another markup frameworks like Zurb unless the other maintainers don't agree with me.

@nashby @josevalim I want your opinions here too.

@andrebras

When using simple_form without any framework integration if we have something like:

f.input :published, as: :boolean

we get an inline checkbox. Perfect! Why change that with twitter bootstrap integration if they use inline too, for both form, vertical and horizontal.

Lets leave it like that (inline) and only provide extra options, for the other way around!

:)

@rafaelfranca

If you look at the generated HTML you will see that has a huge difference between what you call inline in the Twitter Bootstrap and the inline that is generated in the vanilla SimpleForm.

@rafaelfranca

Our inline checkbox means

<label for="foo">Foo</label><input type="checkbox" id="foo" name="foo" />

The bootstrap inline means

<label class="checkbox">
  <input type="checkbox"> Remember me
</label>

The problem is in the first example I can do something like this:

f.label + f.input

to all the cases (checkboxes, text fields, select fields)

And in the last I have to do a different logic to checkboxes and the others fields.

We also have problems with the collection checkboxes.

This is exactly the kind of thing that I want to avoid. Change the SimpleForm internals to work with Twitter Bootstrap.

@nashby

@rafaelfranca yeah, as for me adding new options is not good too. So I'm 👍 to @carlosantoniodasilva solution. We just need to implement it :)

@ghost

I have been unable to get the text on the left side of a checkbox (not using bootstrap).

Whatever happens with this, please document its usage.

@rafaelfranca

@zepsolar What do you want to archive? The default is generate text to the left side of a checkbox. With or without bootstrap

@andrebras

@zepsolar look above in this pull request! :)

When using simple_form without any framework integration if we have something like:

f.input :published, as: :boolean

we get an inline checkbox. Perfect! Why change that with twitter bootstrap integration if they use inline too, for both form, vertical and horizontal.

And the inline default is text on the left side of the checkbox!

@kwerle

(zepsolar is me)
In HAML, using simple_form 2.0.3:

    = f.input :enabled

and

    = f.input :discontinued, as: :boolean

both are showing the checkbox on the left. (discontinued is a derived field)

@rafaelfranca

This is weird because the code has label + input so the label is always in the left side.

@kwerle

In addition, my config file says (preconfigured after running the initialize and not touching it)

  config.boolean_style = :nested

Here is some raw HTML output from another example:

    = f.input :allow_ns_spanner
    <div class="input boolean optional"><input name="roof_attachment[allow_ns_spanner]" type="hidden" value="0" /><label class="boolean optional control-label checkbox" for="roof_attachment_allow_ns_spanner"><input checked="checked" class="boolean optional" id="roof_attachment_allow_ns_spanner" name="roof_attachment[allow_ns_spanner]" type="checkbox" value="1" />Allow ns spanner</label></div>
@rafaelfranca

oops the right code is input + label.

@rafaelfranca

@kwerle I have to investigate better. Could you open a new issue with the generate markup and the markup that you want to archive?

Thanks

@rafaelfranca

I'm going to close this one since I think we don't need anymore for Bootstrap 3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment