Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Improve the `:inline_label` option #585

Closed
rafaelfranca opened this Issue · 17 comments

5 participants

Rafael Mendonça França Carlos Antonio da Silva André Brás Vasiliy Ermolovich Kurt Werle
Rafael Mendonça França
Owner

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

Carlos Antonio da Silva
Collaborator

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
André Brás

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.

Rafael Mendonça França

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 :-1: to make it generate inline checkboxes by default and I'm :-1: 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.

André Brás

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!

:)

Rafael Mendonça França

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.

Rafael Mendonça França

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.

Vasiliy Ermolovich
Collaborator

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

Deleted user

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.

Rafael Mendonça França
Owner

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

André Brás

@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!

Kurt Werle

(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)

Rafael Mendonça França
Owner

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

Kurt Werle

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>
Rafael Mendonça França
Owner

oops the right code is input + label.

Rafael Mendonça França
Owner

@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

Rafael Mendonça França

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
Something went wrong with that request. Please try again.