Bootstrap 3 support #28

Merged
merged 50 commits into from Apr 4, 2014

Projects

None yet
@rafaelfranca
  • Install bootstrap 3 using bower
  • Review the header
  • Review the breadcrumb
  • Review the horizontal form
  • Review the comments form
  • Create a vertical form
  • Review the footer
  • Remove the vertical/horizontal toggle
  • Use Simple Form 3 generated initializers
  • Extract the wrappers configuration to Simple From
  • Add errors to example page

Closes #24 #26

Related

twbs/bootstrap#9067

@rafaelfranca

Check boxes support is the first problem. I listed they at 7d76738

@johnnyshields

+1 👍 SimpleForm BS3 support is the last blocker for myself (and I suspect many others) to upgrade BS2->BS3

@rafaelfranca rafaelfranca referenced this pull request in plataformatec/simple_form Oct 7, 2013
Closed

Dropdowns, Firefox, and bootstrap 3 incompatabilities #904

@vargeorge

@rafaelfranca Thank you. Any thought when this may be available?

@rafaelfranca

Unfortunately, no

@Chipairon

I have created a pull request to merge with this one if you find it appropriate that solves the problems I have found so far.

#30

Please, let me know if you like/agree with my approach and if it can be improved.

@caarlos0

Meanwhile, any workaround for that?

@wtfiwtz

See this thread: plataformatec/simple_form#864
I also have a workaround I've been using successfully to date: https://github.com/wtfiwtz/simple_form_bootstrap3/commits/master

@caarlos0

nice, thank you very much!

@Nerian

Hi @rafaelfranca ,

What's the state of Simpleform's bootstrap 3 integration? I recall there where some changes in the core simple_form that were necessary for supporting TW3 forms. Are those changes done? Is SF ready for supporting TW3?

I am particularly interested in full support for horizontal forms since that is what my website uses.

I will be available this weekend so I would like to spend some time improving SF support for TW3. Let me know what tasks need to be completed and where can I be of use.

Thanks.

@rafaelfranca
Owner

Hi.

Simple Form still don't support Bootstrap 3. Nothing was did in the direction to make support to Bootstrap 3. I don't have time neither interest (I'm not a Bootstrap user) to work on it.

I'm hoping someone at Plataformatec will work on it, but I gladly can help someone else interested on work on it, but I don't think it will be an easy task, neither a quick one.

There are some requirements:

  • We can't change Simple Form to have any code specific for Bootstrap.
  • Custom Inputs are not a good solution too.
  • I still not convinced we need to support it. (This is why I created this branch).

Let me know if you want to help.

@johnnyshields

@rafaelfranca I appreciate the work your team does, however lack of BS3 support in SimpleForm is becoming a major headache. Is there a list of outstanding gaps needed for BS3 support so we can finish it--clearly there is demand in the community?

@rafaelfranca
Owner

@johnnyshields no, like I said I don't use Bootstrap so I even don't know what need to be supported. This is why I created this branch.

Feel free to investigate.

@Nerian

I understand. Makes total sense that you don't want to condition the design of SF just because of BS. There maybe changes though that must be done in SF in order to support Bootstrap 3, in such case – and if those changes don't make sense to be in core – I think I could just release those changes in a separate gem. Judging from the attention this issue gets, I don't think it will be a problem for us (me and interested parties) to maintain it.

Sounds good?

@rafaelfranca
Owner

@johnnyshields just to make clear, Simple Form doesn't have anything to do with Bootstrap. They are two independent projects and we don't have any obligation to upgrade our project if Bootstrap change.

Bootstrap integration since the beginning is a facility, this is why all the code responsible to make this support is generated inside users application.

I'll gladly merge any work to to make this integration done.

@rafaelfranca
Owner

@Nerian I not convinced we need a separated gem. Wrappers API is very flexible and we will gladly accept any change in that API to make this integration possible. I don't want conditional like if bootstrap? inside Simple Form, but this doesn't mean that the integration is not possible improving the wrappers API and adding new configurations.

@rafaelfranca
Owner

BTW, a gem would be a lot error prone, it will have to depend in private API of Simple Form and this API can change making this gem very likely to be broken on every Simple Form release.

@Nerian

I agree. Alright, I will write the wrappers and if I find that I need SF to support something I will let you know and we can see.

Thanks!

@rafaelfranca
Owner

Please. I'd also love if you could continue the work on this branch and if you could not get some component working using Simple Form API just make the HTML markup and we can think a good way to solve that problem in Simple Form like I did at 7d76738.

That would make clear what problems we need to solve and we can think a good way to solve that problem without making our code coupled with Bootstrap.

@johnnyshields

@rafaelfranca of course BS3 is a separate project, but with the wide usage of BS3 esp in the Rails community it is only natural that SimpleForm should provide first-class support for it.

The problem with BS3 and SimpleForm is mainly in the wrappers--the controls themselves are basically OK with the exception that the class form-control needs to be set on them. Perhaps it would make sense to extract simple_form_controls as a separate gem, which would allow an idiosyncratic wrapper layer to be written for BS3?

@rafaelfranca
Owner

No, it is not natural, Simple Form don't have anything with Bootstrap, it is a form generator, not a form generator for bootstrap. You can use Bootstrap without Simple Form and Simple Form without Bootstrap

You can set the form-control class to them as you can see in the code on this pull request. I don't think this is the problem anymore. And like I said creating a separate gem will not solve anything, only create more problems.

@tboyko

I agree with you to a point, @rafaelfranca. Yes, Simple Form should remain pure in the sense that it does not include specific mention of Bootstrap. That being said, much of Simple Form's success and usage comes from integration with Bootstrap. Why discontinue facilitating the usage of Bootstrap with it?

The happy medium here seems to be this: Specific bootstrap support should exist externally from the Gem. That being said, if that external support requires that the Simple Form gem add additional flexibilities to it in order to facilitate the sort of structures BS3 may require, those should be added.

@rafaelfranca, you strongly feel that SF should not be "tainted" by BS3 specifics. If BS3 integration, through an add-on gem, requires the ability to modify lower-level SF functionality, shouldn't your philosophy agree with this? It's really asking SF to optionally allow for additional abstraction than requiring it to become more "colored" by the specifics of one application.

To clarify: By separate gem, I'm referring to an add-on that depends on Simple Form, not a gem based on a fork of SF.

@johnnyshields

@rafaelfranca to be clear here the problem is the wrappers.

Conceptually, the BS3 users want to have an input method which will "do the right thing" whether the form layout is horizontal or vertical.

However, the current SimpleForm wrapper definition DSL, although very flexible, does not lend itself well to BS3 grid-based semantics (though it works perfectly for BS2 and others), esp. when you try to take advantage of the responsive features.

I'd propose that BS3-specific wrapper code in a new gem, using the SimpleForm input_field method for the controls themselves, is the way forward.

@rafaelfranca
Owner

Guys, I never said we will not support Bootstrap 3. I said I can't work on this now, neither have interest to do this in my free time. I said many times before that I'll gladly accept PRs and help who want to work on it, and made clear that we can't add specific conditionals.

Or I'm not being clear, or you are not reading what I'm saying. (See #28 (comment))

The happy medium here seems to be this: Specific bootstrap support should exist externally from the Gem. That being said, if that external support requires that the Simple Form gem add additional flexibilities to it in order to facilitate the sort of structures BS3 may require, those should be added.

Exactly what I want. But for this we need to identify which problems we have today.

@rafaelfranca, you strongly feel that SF should not be "tainted" by BS3 specifics. If BS3 integration, through an add-on gem, requires the ability to modify lower-level SF functionality, shouldn't your philosophy agree with this? It's really asking SF to optionally allow for additional abstraction than requiring it to become more "colored" by the specifics of one application.

This is what Wrappers API is for. And today it already works this way. We'll gladly extend Wrappers API to make it work again, and after that I can easily extract the wrappers wrote to make that support to a new generator. This was exactly what we did to support Bootstrap 1 and 2. And that configuration was extracted from this repository.

To clarify: By separate gem, I'm referring to an add-on that depends on Simple Form, not a gem based on a fork of SF.

Yes, this is what I'm thinking, but like I said before this gem will be very coupled to Simple Form's private API and this gem will very easy to brake on every Simple Form release, and I don't think we need it now.

However, the current SimpleForm wrapper definition DSL, although very flexible, does not lend itself well to BS3 grid-based semantics (though it works perfectly for BS2 and others), esp. when you try to take advantage of the responsive features.

This happens because we changed the wrappers and this is exactly the point of this pull request, identify the wrappers that will work out-of-box with Bootstrap 3.

I'd propose that BS3-specific wrapper code in a new gem, using the SimpleForm :input_field method for the controls themselves, is the way forward.

Again we don't need this, since all the code that will make Simple Form work with Bootstrap 3 will live in users applications like it works since the Bootstrap 1 ages.

Conclusion

Yes, we will support Bootstrap 3.

When? I don't know.

Who will work? I don't know but I'd love that someone take care of this pull request like I commented here.

You don't need to change nothing on Simple Form, only give me the problems that you are facing when trying to use Simple Form with Bootstrap 3. And then we can think a good way to support it without making Simple Form coupled with Bootstrap.

After we have identified all the problems we can focus on solve these problems and everyone will be happy 😄.

@Nerian

I totally understand you @rafaelfranca . I will build a list of working code and blockers this weekend.

Thanks for your hard work!

@rafaelfranca
Owner

@Nerian I'm not sure if I'll be free over the weekend but if you need some help or guidance let me know.

@caarlos0

I managed to make basic things work, but checkboxes and radios still broken and I have no idea about how to fix them... @Nerian, if you have any tips about that, I would like to hear too!

Also, thanks @rafaelfranca for your work here.
Cheers

@johnnyshields

@rafaelfranca thanks for your time to write a detailed response

@rafaelfranca
Owner

@caarlos0 yes, that was my first problem. What I'm thinking to solve this is:

  1. Make possible to define classes in using the wrapper API
config.wrapper :checkbox do |c|
  c.input class: 'foo'
end
  1. Map the checkbox wrapper to the checkbox fields.

2) is already supported. 1) is not supported yet but we have a pull request to make this possible.

@caarlos0

Nice... thanks!

@Nerian

I have started reviewing code.

  • File input should not have form-control

The file input have the default class form-control applied to it. According to bootstrap, these inputs should not have that class. What's a good way to remove that input_class for just file fields?

@rafaelfranca
Owner

Currently there is no way. But I already know how to solve this.

@umhan35

👍

@Nerian

@rafaelfranca Ok so you are working on that on SF?

I continue review:

  • Submit button should default to have classes btn btn-default.

I changed the default config.button_class = 'btn' to config.button_class = 'btn btn-default'. If the user wants a different class, like btn-primary he can do f.submit :class => 'btn-primary' and since the class is appended it will be the one that gets to style the button.

An even better approach would be to parse the class that the user pass and if it starts with btn- then we remove the btn-default and just use that one. Is this supported? Is there a nice way to do such a thing?

  • Add class to label on demand.

In inline-forms for example the label should have the class 'sr-only'. In any case, being able to pass a class to a label on demand may be useful for any kind of form. The 'sr-only' class simply hide the label unless you are in an screenreader. Bootstrap provides with many response class like this. Is there a way to pass a class to a label?

<div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>

I am working on this branch:

Nerian@rafaelfranca:rm-bootstrap-3...Nerian:rm-bootstrap-3

It's not meant to be merged per se. I am simply taking all the forms in the bootstrap docs and see if I can build it using simple_form. Check http://localhost:3000/examples if you run it.

@Nerian
  • Horizontal Forms

Horizontal forms are made of a label and a div wrapper with input field inside. Both label and the wrapper div need a class that specifies its width.

In this case, col-sm-3 for the label and col-sm-9 for the div.

<div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-9">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>

This class dependency is only present in horizontal forms; the other form types should not have those classes. Bootstrap defaults to 100% width in those cases.

So for horizontal forms to work we need a way to add a class to a label.

I made a custom wrapper for horizontal forms. Using a wrapper will give us good defaults for horizontal forms.

  config.wrappers :bootstrap_horizontal, :tag => 'div', :class => 'form-group', :error_class => 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label, :class => 'col-sm-3'    # <-------- this needs to be implemented
    b.wrapper :tag => 'div', :class => 'col-sm-9' 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
  • Being able to pass a class to the label builder.
  • Set form class

Is it possible to specify a class for the form? I'd like to set that if you are using :bootstrap_horizontal as your wrapper, then that form get the form-horizontal class applied to it automatically. Is this possible right now? Can it be implemented?

Also, it should be possible to overwrite the label and the wrapper div classes when building the form too. Something like:

<%= simple_form_for :article, wrapper: :bootstrap_horizontal, 
              defaults: { 
                       label: { class: "col-sm-5" }, 
                       wrapper_div: { class: "col-sm-7"} 
              }, 
              html: { class: 'form-horizontal' } do |f| %>

  <%= f.input :email, as: :string, label: 'This one got a very loooooong label'  %>

<% end %>
@Nerian
  • Checkbox

Bootstrap Checkbox

<div class="form-group">
  <div class="checkbox">
    <label>
      <input type="checkbox" value="">
      Option 1
    </label>
  </div>
</div>

Simpleform checkbox

<div class="form-group boolean optional article_checkbox">
  <label class="boolean optional control-label" for="article_checkbox">Check me out</label>
  <div>
    <input name="article[checkbox]" type="hidden" value="0">
       <label class="checkbox">
       <input class="boolean optional form-control" id="article_checkbox" name="article[checkbox]" type="checkbox" value="1">
      </label>
   </div>
</div>

So, in order to produce the right output, we need to:

  1. Use a wrapper like:
  config.wrappers :checkbox, :tag => 'div', :class => 'form-group', :error_class => 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.wrapper :tag => 'div', :class => 'checkbox' do |ba|
      ba.use :label_input
    end
    b.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
    b.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }
  end

That give us the right tags. But the classes are incorrect.

  1. label must not have the checkbox class.
  2. input must not have the form-control class

That's how it is for a vertical form. Horizontal forms would be slightly different, namely it add one more div wrapper, that sets the width.

Bootstrap horizontal form, checkbox

<div class="form-group">
    <div class="col-sm-offset-2 col-sm-9">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>

So the wrapper for horizontal checkboxes would be:

Simpleform

  config.wrappers :checkbox_horizontal, :tag => 'div', :class => 'form-group', :error_class => 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.wrapper :tag => 'div', :class => 'col-sm-offset-2 col-sm-9' do |wr|
      wr.wrapper :tag => 'div', :class => 'checkbox' do |ba|
        ba.use :label_input
      end
    end

    b.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
    b.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }
  end
  • Need a way to remove the checkbox class from the label in label_input
  • Need a way to remove the form-control class from the input in label_input
@Nerian

Having to manually add wrapper: checkbox for every input is something that can be automated.

I am thinking of a method that you could use inside a wrappers block that allows you set the default wrapper for kind of inputs, as described in [1]. The method could be called wrapper_for and accepts a symbol or array with symbols with the names of the inputs, and a second parameter that is the name of the wrapper to use for them.

[1] https://github.com/plataformatec/simple_form#available-input-types-and-defaults-for-each-column-type

So in our particular case:

  config.wrappers :bootstrap, :tag => 'div', :class => 'form-group', :error_class => 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper :tag => 'div' 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

    b.wrapper_for [:check_boxes, :boolean], :vertical_check_box   # <======
  end

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

So if you use the bootstrap wrapper for a form, every input will use the wrapper as defined, except the :check_boxes and :boolean, that will use the :vertical_check_box.

This will help to DRY forms. In the case of bootstrap, the user will practically just need to set the wrapper at the form level (inline-form, horizontal-form, default), and SF will figure out what wrapper to use for each kind of input.

@johnnyshields

@Nerian in the above example, what happens if you want to switch a form from horizontal to vertical layout? Do you need to define a set of horizontal sub-wrappers for each control?

@Nerian

Yes, there is both vertical and horizontal checkbox wrappers.

https://github.com/Nerian/simple_form-bootstrap/blob/7abcefeca687ebe87092ca6d549bc1ea23192398/config/initializers/simple_form.rb#L60

https://github.com/Nerian/simple_form-bootstrap/blob/7abcefeca687ebe87092ca6d549bc1ea23192398/config/initializers/simple_form.rb#L83

The user would just need to to change from:

<%= simple_form_for :article, wrapper: :bootstrap_horizontal, html: { class: 'form-horizontal' } do |f| %>

to

<%= simple_form_for :article do |f| %>

(since vertical layout is the default)

@johnnyshields

@Nerian cool, looking forward to seeing how this turns out. Thanks for working on this.

@rafaelfranca

Is there a way to pass a class to a label?

Yes.

f.input :foo, label_html: { class: 'bar' }

Could you confirm if this work?

@rafaelfranca

An even better approach would be to parse the class that the user pass and if it starts with btn- then we remove the btn-default and just use that one. Is this supported? Is there a nice way to do such a thing?

This is the kind of thing that I'm trying to avoid. This is specific code for bootstrap that we don't need. Since we can append classes to btn-default I don't think this is required.

@rafaelfranca

Having to manually add wrapper: checkbox for every input is something that can be automated.

This is already possible. See https://github.com/plataformatec/simple_form/blob/master/lib/simple_form.rb#L107-110

@rafaelfranca

@Nerian awesome work!!!!!!!!!!!!!!!!! 💚💛❤️💜💙

May I ask you to open a PR to this repository point to this branch?

Some of changes on Simple Form I already expected and others we already have support. I'll work in the missing features this week and it would be great if I have this branch ready.

@rafaelfranca rafaelfranca referenced this pull request in plataformatec/simple_form Nov 11, 2013
Closed

Support bootstrap 3 #927

@Nerian

@rafaelfranca

This works, but how do I do that in the wrapper api?

f.input :foo, label_html: { class: 'bar' }

This does not work.

b.use :label, :label_html => { :class => 'col-sm-3' }

https://github.com/plataformatec/simple_form/blob/master/lib/simple_form.rb#L107-110

As I understand it, that will map an input type to a wrapper. So you can set string inputs will use string_wrapper. But these are global settings.

What I proposed was to dynamically map input types to a specific wrapper taking into account the parent wrapper. This would allow us to do something like:

This would be the default wrapper (vertical align)

  config.wrappers :bootstrap, :tag => 'div', :class => 'form-group', :error_class => 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label
    b.wrapper :tag => 'div' 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

    # :check_boxes and :boolean types will use the vertical_check_box wrapper.
    b.wrapper_for [:check_boxes, :boolean], :vertical_check_box    # <=====
  end

This would be the horizontal wrapper.

  config.wrappers :bootstrap_horizontal, :tag => 'div', :class => 'form-group', :error_class => 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label, :label_html => { :class => 'col-sm-3' }

    b.wrapper :tag => 'div', :class => 'col-sm-9' 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

    # :check_boxes and :boolean types will use the horizontal_check_box wrapper.
    b.wrapper_for [:check_boxes, :boolean], :horizontal_check_box     # <=====
  end

So now in the views you just concern yourself with the kind of form you want to use, everything else is an implementation detail:

<%= simple_form_for :article, wrapper: :bootstrap_horizontal, html: { class: 'form-horizontal' } do |f| %>

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

Pull request:

#31

@Nerian

So, to summarize this whole report:

  • Have a way to unset the default class on specific components.

Like when you use b.use :label or b.use :input you should be able to remove the default classes. These:

config.label_class = 'control-label'
config.input_class = 'form-control'

Possible implementation:

b.use :label, :html => { :include_default_class => false }
b.use :input, :html => { :include_default_class => false }

Another approach, more flexible ( can be used in *3 too.)

b.use :label, :html => { :sf_classes => { :default_class => false } }
b.use :input, :html => { :sf_classes => { :default_class => false } }
  • Add class to labels

Example:

b.use :label, :html => { :class => 'col-sm-3' }
  • Set form class

If the wrapper is applied to a form, as in simple_form_for :article, wrapper: :bootstrap_horizontal then you should be able to add a default class to this form.

Possible implementation:

config.wrappers :bootstrap_horizontal, :tag => 'div', :form_class => "form-horizontal" , :class => 'form-group', :error_class => 'error'
  • Have a way to set a component to not add its class name.

Example:

b.wrapper :tag => 'div' do |ba|
   ba.use :label_input
end


<div class="form-group boolean optional article_my_checkbox">
  <div class="checkbox">
    <input name="article[my_checkbox]" type="hidden" value="0">


    // This should not have the checkbox class. That checkbox class is added because the input
    // type is checkbox.
    <label class="boolean optional control-label checkbox" for="article_my_checkbox">



    <input class="boolean optional form-control" id="article_my_checkbox" name="article[my_checkbox]" type="checkbox" value="1">Check me out</label>
  </div>
  <p class="help-block">Lorem ipsum dolor sit amet</p>
</div>

This is necessary because in bootstrap the checkbox class should be applied to the wrapper div, instead of the label. As in:

b.wrapper :tag => 'div', :class => 'checkbox' do |ba|
   ba.use :label_input
end

Possible implementation:

# Will not add the checkbox class to the label
ba.use :label_input, :include_component_name_class => false  
ba.use :label, :include_component_name_class => false

Another approach, more flexible ( can be used in *1 too.)

b.use :label_input, :html => { :sf_classes => { :type_class => false } }
b.use :label, :html => { :sf_classes => { :type_class => false } }
  • Have a way for SF to dynamically choose wrapper depending on the form's wrapper.

So that the user only needs to choose one wrapper, in the form, and SF can figure out what wrapper to use for each kind of input, within that form.

Possible implementation:

config.wrappers :bootstrap_horizontal do |b|
    ....
    # :check_boxes and :boolean types will use the horizontal_check_box wrapper.
    b.wrapper_for [:check_boxes, :boolean], :horizontal_check_box
end

config.wrappers :bootstrap_vertical do |b|
    ....
    # :check_boxes and :boolean types will use the vertical_check_box wrapper.
    b.wrapper_for [:check_boxes, :boolean], :vertical_check_box
end

See http://localhost:3000/examples #31

@rafaelfranca

What I proposed was to dynamically map input types to a specific wrapper taking into account the parent wrapper. This would allow us to do something like:

There is no notion of parent wrapper. Wrappers are per field. What we can do is try to expose this configuration per form builder object.

@rafaelfranca

Have a way to unset the default class on specific components.

This will not exist. I prefer to remove this default class configuration, and this is exactly my idea. If we can configure classes per component in the wrapper we don't need the global option anymore.

@rafaelfranca

Have a way for SF to dynamically choose wrapper depending on the form's wrapper.

Forms don't have wrappers. Wrapper is a field abstraction. A form has form builder objects and these objects don't follow the wrappers API, neither should.

@rafaelfranca

Awesome. I already know how I'll solve each of the problems. Again, thank you much for working on this.

@Nerian

@rafaelfranca Hi, I have more time this weekend. How can we move this forward? What does need to be done? Do we have a working solution for the issues stated in #28 (comment) ?

@nijikon

Hi, I would like to participate in finishing this. @rafaelfranca can you tell me with what I need to start in order to finish all the outstanding tasks?

@MrHubble

@Nerian thanks for all of your hard work. How can myself and the rest of the community start to help with this? For starters, how can I incorporate the changes you have made and test it in my Rails 3.2 app?

@Nerian

@MrHubble

In order to test the current code, you can copy https://github.com/rafaelfranca/simple_form-bootstrap/blob/rm-bootstrap-3/config/initializers/simple_form.rb to your own project and see what you get. You will need SimpleForm > 3.0.0

@rcillo

@rafaelfranca so what do you think about the suggestions from @Nerian of adding a way to not add simple form default classes to labels and inputs? I think it solves the problem.

But I get myself asking myself: is this the right way? Should the user set something globally with config.input_class = 'form-control' and then nitpick exceptions or should the users explicitly add a class to every wrapper except the checkbox one.

@rcillo

Well, we do need to define exceptions because we should not add the checkbox class to the label, as well.

@rafaelfranca

@rcillo we are going to this direction plataformatec/simple_form#622 (comment)

Users defines the classes of the tags in the wrapper. This will make possible to we define a wrapper only to checkboxes that doesn't add the class to the label.

If you are looking for something to work that PR is a good start.

@rcillo

Unfortunately, it seems that this PR plataformatec/simple_form#622 only allows adding classes to a label. So if we set a global class for labels, with config.input_class = 'form-control' and then we

f.input :foo, class: ['bar']

Then we would have <input class="form-control bar">, and not <input class="bar">.

This other feature added recently plataformatec/simple_form#933 also do not allow us to remove the checkbox class from the labels.

I think we still need to implement one of the suggestions here in order to provide ways to not add this checkbox class.

@tjgrathwell tjgrathwell added a commit to railsbridge/bridge_troll that referenced this pull request Feb 3, 2014
@tjgrathwell tjgrathwell Bootstrap 3 WIP
Things are generally working, except forms.

The viability of this branch probably depends on this PR getting finished:
rafaelfranca/simple_form-bootstrap#28
982961d
@rafaelfranca rafaelfranca referenced this pull request in plataformatec/simple_form Feb 4, 2014
Closed

Problems with Bootstrap 3.1.0 #980

@vargeorge

any timeline yet on when simple_form will formally support BS 3.x+ ?

@micky666

nevermind I figured out my issue.. got the example running finally and realized it wasn't just mine that looked all crazy :)

glad you guys are working on this, thanks for all your hard work!

@donnykurnia

Hi all,

Here is what I use in my project:
https://gist.github.com/donnykurnia/9267948

I use unmodified simple_form 3.0.1.

For horizontal form, I wrap the label instead. I only test this with single input field, haven't test it with multiple checkbox/radio yet.

Hope this could be useful.

Thanks.

@mensfeld

yeah, guys any timeline on this issue?

@rafaelfranca rafaelfranca referenced this pull request in plataformatec/simple_form Mar 11, 2014
Merged

Make possible to use the Wrappers API to define attributes for the components #997

2 of 2 tasks complete
@rafaelfranca rafaelfranca referenced this pull request in plataformatec/simple_form Mar 12, 2014
Merged

Add boolean_label_class config #999

@rafaelfranca

With my bootstrap-3 branch I could make the vertical form very close to Bootstrap 3

Only the file inputs that are different but it is not hard to make they look the same.

@rafaelfranca

Now all the forms are working:

simple_form-bootstrap

We are very close to a release.

@vargeorge

That's excellent Rafael. Support for BS3 on the mainline will be awesome.

@rafaelfranca Merge pull request #33 from bradly/rm-bootstrap-3
Changing bootstrap error class to has-error
81989b5
@rafaelfranca rafaelfranca referenced this pull request in plataformatec/simple_form Mar 21, 2014
Merged

Update the bootstrap generator to work with Bootstrap 3 #1004

@rafaelfranca

I think my work here is finished. Could you please try the master branch with the configuration included here and provide feedbacks?

and others added some commits Mar 25, 2014
@rafaelfranca Fix the error classes 87a4c56
@rafaelfranca Remove broken wrappers b781e38
@rafaelfranca Fix the alert e0062df
@techmaverick techmaverick Tweaks to example forms for visual parity
Tweaked a few small aspects of the example forms for visual parity and
styling across Bootstrap form and SimpleForm: placeholders and remember
me checkboxes
f8afe01
@techmaverick

Thanks for the hard word on this @rafaelfranca - I don't see any issues in the configuration itself with how it is styling elements in general. I found a couple of small tweaks that can be made to better bring the 2 forms into parity on the Examples view:

  1. Basically, the placeholders between the Bootstrap and SimpleForm versions can be made to align so that placeholders are used on both.
  2. Also, to align the the official Bootstrap 3 docs, the Remember Me label on the inline checkbox can have a space for separation.

I've included a pull request for these small tweaks.

@techmaverick

As for other comments, since ‘Remove the vertical/horizontal toggle’ is on the checklist, I disregarded reviewing the issues with that page in detail for changes.

A few things I did notice in case you end up keeping that page in the project in a different, edited form:

  1. The ‘toggle code examples for each form element’ content is outdated as it refers to Bootstrap 2.3.x syntax
  2. On webkit (Chrome and Safari tested), the .input-group-addon class has User Agent stylesheet issues for a very slight difference in padding which doesn’t look seamless like the current version of simple form bootstrap screen shot 2014-03-25 at 3 34 38 am
  3. The last 2 form elements (disabled text boxes with a checkbox next to them) aren’t being disabled
  4. Inline/stacked radios and checkboxes aren’t formatted correctly
  5. Validation on ‘Create Article’ in the current version of SimpleForm Bootstrap highlights Name , versus this Bootstrap 3 updated version which highlights the first one only

Please let me know if you need any other review help / support to get Bootstrap 3 updates completed

@rafaelfranca Merge pull request #38 from techmaverick/rm-bootstrap-3
Tweaks to example forms for visual parity (related to pr #28)
84e736c
@rafaelfranca

@techmaverick thank you for the review. Actually I'm thinking on removing that page and keep only the example pages but before I need to add support to errors on the example page.

I'll work on this and I think it is the only thing that we need to do.

@techmaverick

Glad to help - thanks for your work on this large update @rafaelfranca . I'm assuming that means an examples model with some basic validations to see the errors working on the forms - that sounds nice and concise for visualizing everything.

@Vadorequest

Hi guys!
I just found this repo and I'm quite happy to see that this gem will be released soon. I read the headlines in this thread and I have some questions.

  1. I guess you don't have a specific date in mind about when this will be released, but I assume it's in less than one week? (or two)
  2. For what I understood, this gem is different from simple_form and you basically added some features and a different wrapper config file that helps to use bootstrap 3. What about the way to use it? Will I still be able to use the old simple_form at the same time than simple_form_bootstrap? I guess so but I'm not sure. (I'm updating a part of my application but not the entire website so I need to still use the old way on some pages!)
  3. Is there any way to generate the client side validation with simple_form automatically based on the models? If not, do you know what I could use? My current application use https://github.com/bcardarella/client_side_validations, but as you can see, the gem has been deprecated and is not maintened anymore so I'm looking for something else.

Thanks for your amazing work!

@Vadorequest

After some more research I found this gem that looks quite good.

https://github.com/joecorcoran/judge - Client side validation based on the models.
And what's really nice is that they have a simple_form plugin.

https://github.com/joecorcoran/judge-simple_form

So I think my third question is answered, I'll give a try to Judge, I'm just wondering about the compatibility between judge_simple_form and simple_form_bootstrap, because I'm not a ruby/gem pro, I guess/hope they will work together fine, what do you think?

@rafaelfranca

I'm finished the work here.

example application with simpleform and twitter bootstrap

@lucasmazza @laurocaetano @carlosantoniodasilva

@m5o

WOW!! 👍

@laurocaetano
Collaborator

@rafaelfranca looks good! Great job ❤️ 💛 💙 💚

@lucasmazza
Collaborator

@rafaelfranca since we are nuking the google prettify I guess you can remove everything that is on application.js too

@lucasmazza
Collaborator

also, the Horizontal and Basic forms have hints on the Simple Form example while the "Bootstrap" example does not - shouldn't they have the same components so they would look more similar?

@lucasmazza
Collaborator

Awesome work btw 👏 🎉 👏 🎉 👏 🎉 👏

@matfiz

thank you so much @rafaelfranca 👏

@caarlos0

Awesome work @rafaelfranca 👏 👏 👏 👏 👏

@johnnyshields

Much appreciated @rafaelfranca

@marcusg

thank you @rafaelfranca 👍

@d4rky-pl

looks good, can't wait 👍

@iloveitaly

Looks great!

@everaldo

Thanks! 👍

@gustavokloh

Thanks a lot dude!

@ronaldfalcao

Great contribution for community. Thank you!!!!

@hpcarlos

Thanks, nice job!

@alessandro1997

Thank you very much, this is some impressive work! :)

@mauriciomdea

Nice work! Thank you very much!

@Vadorequest

Looks really beautiful, well done!

@cicerobr

Oh god .. Nice job :)

@ricardodovalle

Thanks @rafaelfranca, looks great 👍

@Nerian

Sweeeeeet 🍰

@phinfonet

👍

@rafaelfranca
Owner

@lucasmazza I removed the code pretty but maybe I'll add it back again. I change the application to have only one page, but I'm planning to work in a full documentation inside this application too.

Since I'm not sure when it will be done I removed the dependencies and I'll merge this branch as it is.

Thank you for the review.

@rafaelfranca
Owner

Thank you for the support guys. ❤️

@lucasmazza
Collaborator
@volmer
Collaborator

Awesome!! 👏

@conzett

👍 Great work!

@luizrobertofreitas

Parabéns, trabalho show de bola!!

@rafaelfranca rafaelfranca merged commit 58f308a into master Apr 4, 2014
@rafaelfranca rafaelfranca deleted the rm-bootstrap-3 branch Apr 4, 2014
@rafaelfranca rafaelfranca referenced this pull request Apr 4, 2014
Closed

Support Bootstrap 3 #26

@linhmtran168

Awesome!!! 👏 🎆

@jmuheim

Thanks a lot! 👍

@jmuheim

But how exactly do I use this? SimpleForm is still v3.0.1.

@andrielfn
Collaborator

@jmuheim A new release of the gem will be available soon, until then, an option would be point the gem to master.

@jmuheim

Thank you, @andrielfn!

@DanielKehoe DanielKehoe referenced this pull request in RailsApps/rails-bootstrap Apr 11, 2014
Closed

Bootstrap 3 simple form #7

@rafaelfranca

We just released Simple Form 3.1.0.rc1 with Bootstrap 3 support. Please give a try.

http://blog.plataformatec.com.br/2014/04/bootstrap-3-support-for-simple-form/

@tjgrathwell tjgrathwell added a commit to railsbridge/bridge_troll that referenced this pull request May 30, 2014
@tjgrathwell tjgrathwell Bootstrap 3 WIP
Things are generally working, except forms.

The viability of this branch probably depends on this PR getting finished:
rafaelfranca/simple_form-bootstrap#28
8753eaf
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment