Bootstrap 3 compatibility

[miharekar]

RC1 is out and it brings a lot of changes to form elements. Maybe someone should start making this compatible?

[josevalim]

Good point @mrfoto!

All the bootstrap related configuration is in your simple form initializer, so I recommend people to start playing with different configurations in the initializer and see how that works out!

[warmwaffles]

Unfortunately I can not apply the control-label class to b.use :label, class: 'control-label'.

This is the third time Bootstrap has changed the way forms are built, and I doubt it's the last.

[carlosantoniodasilva]

I'm happy to apply any changes in SimpleForm that allow better bootstrap 3 integration, as long as they are not specific bootstrap features across our components. All bootstrap related configuration should be in the simple form bootstrap generated initializer.

[findrails]

The bootstrap generated initializer is very good - one initial thing it misses is the ability to add a class (instead of wrap_with, for instance) in the bootstrap loader. The new bootstrap changes a few things, but most could be accomplished with that. i.e.

b.use :input, class: 'form-control'

@warmwaffles - you can get your specific problem working using config.label_class in simple_form.rb. Unfortunately, it's missing a config.input_class, which again, would solve some of the bootstrap form woes.

[carlosantoniodasilva]

input_class has been proposed and not got in, but I'm all ears to talk about it back again, as it's going to ease the usage of bootstrap 3 with SimpleForm. The other possibility of adding classes with b.use has also been discussed without agreement yet, and it also needs some more rework.

Lets talk about input_class for now in #337.

[paav-o]

Yes, support for adding class in initializer would be very useful with the new Bootstrap! Meanwhile this should do the trick for single forms:

= simple_form_for(@user, :defaults => { :wrapper_html => {:class => 'form-group'}, :input_html => { :class => 'form-control' } }) do |f|
...

[warmwaffles]

I tried snooping around the code base to look at doing a pull request, but I couldn't figure out where to add it.

[johnnyshields]

A note for Boostrap 3:

Current SimpleForm classes collection_radio_buttons_input.rb and collection_check_boxes_input.rb contain a hardcoded item_wrapper_class method, e.g.:

      def item_wrapper_class
        "radio"
      end

This is conflicts with Bootstrap radio-inline and checkbox-inline classes, which must be either radio or radio-inline, but not both at the same time. Probably not a good idea to hardcode this in a non-overridable fashion regardless.

I raised this issue with Bootstrap 3: twbs/bootstrap#9067, mdo replied:

I think we'll pass on this for now. If it becomes a bigger problem we can revisit.

[AlJohri]

@warmwaffles Does config.label_class = 'control-label' not work for you?

[warmwaffles]

@AlJohri I have not tried. I will have to take a look when I get free time.

[AlJohri]

@paav-o For form-group can you not do

config.wrappers :default, :class => "input form-group"

within the simple_form.rb initializer? the only problem is that you can't set the "input_class" but you can still set the wrapper class easily. To solve the input_class problem you can use this monkey patch:

heartcombo/simple_form-bootstrap#26 (comment)

[rafaelfranca]

Could you guys try master branch?

[AlJohri]

@rafaelfranca Is the master branch Rails 4 only?

Any chance the PR can be backported to version 2.1? It would help immensely.

[carlosantoniodasilva]

@AlJohri yes.

[carlosantoniodasilva]

I think so, feel free to send a pull request cherry-picking that commit to 2-1 branch making sure all tests pass (although I'd recommend updating to rails 4 ;)

[carlosantoniodasilva]

@AlJohri actually, do you plan to use bootstrap 3 with rails 3.2?

[johnnyshields]

@carlosantoniodasilva I definitely plan to use BS3 with Rails 3.2

[carlosantoniodasilva]

@johnnyshields can you give a bit more context please?

I guess I can't see a lot of people migrating existing apps from bootstrap 2 to 3, the same way I'd not expect people starting new apps on Rails 3.2 nowadays, so this kinda conflicts, that's why I ask 😄

[garrettlancaster]

I think most apps these days are feeling the need for truly responsive design, and that's not really possible with BS2. Also, the whole ecosystem will move on and any app that continues to grow will be left without the community benefits and maintaining dependencies on their own.

All that to say, I think many people will upgrade (eventually), including me.

[johnnyshields]

@carlosantoniodasilva I'm running an app in production currently that uses Rails 3.2 and BS 3 RC1. In my view, Rails 4 is not such a huge improvement over Rails 3.2. Things that Rails 4 offers like strong parameters and turbolinks I can get as gems as I need them, and I do not see a huge driver to migrate to Rails 4 immediately.

Conversely, the BS3 grid system is a massive improvement over BS2 and cannot be backported. As soon as I saw BS3 RC I immediately implemented across my entire app and removed ~1000+ lines of mobile CSS hacks that had accumulated in my app--and after a few days of squashing bugs the app actually looks better and is more responsive than before! BS3 gave my team a productivity boost from the moment I added it, since my designer can spend less time hacking mobile stuff.

A last point is that some gems are still not Rails 4 compatible (or Rails 4 compat is "experimental"). When it comes to migrations, it's really a matter of waiting until the dependent last gem is ready before you can implement. For BS3, the only dependency I have is SimpleForms, and I've removed it / added hacks for now (i.e. using #input_field instead of #input) until it's ready.

[miharekar]

@rafaelfranca Just how exactly does c14bc3e close this? It's still not BS3 compatible...

[neb2000]

@mrfoto agreed, it seems to add the class to the wrapper as well as the input itself

[miharekar]

@neb2000 yeah, but that wasn't the issue here 😄

[rafaelfranca]

So please tell what is missing.
On Aug 15, 2013 7:19 AM, "Miha Rekar" notifications@github.com wrote:

@neb2000 https://github.com/neb2000 yeah, but that wasn't the issue
here [image: 😄]

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/857#issuecomment-22695293
.

[miharekar]

Well the issue was Bootstrap 3 compatibility 😃
So at least a generator for Bootstrap 3 simple form initializer

[neb2000]

@mrfoto I think generating initializer is hardly the problem here, as long as there's a way for you to configure the gem to generate bootstrap3 compatible markup.
The problem with this PR is simple_form uses additional_classes for both the input itself and the wrapper, so using the new config option will cause the wrappers being styled as input fields as well

[miharekar]

@neb2000 I don't know what's the problem but as long as they don't exist, the issue shouldn't be closed

[rafaelfranca]

@neb2000 indeed we need to remove from the wrapper.

@mrfoto we don't want neither plan to couple Simple Form with bootstrap releases. This is why all the configuration are in your application. That said I don't consider the lack of bootstrap 3 specific configuration in our generator an issue.

[zapnap]

Also seeing the class getting added to the wrapper when using this, which is problematic for BS3. Just echoing others' comments here. Thanks for your hard work.

[constantm]

@JoshMcCullough Same here - I just can't seem to get it to generate the relevant wrappers for a horizontal-form. When setting the form class to form-vertical, it works as expected with a vertical form, but I figure out how to make it generate the extra wrappers needed for a horizontal form.

Am I missing something, or is it currently not possible? I don't see anything in the above Gists that would make it possible in my mind.

[fadeojo]

@JoshMcCullough it's not generating the horizontal form wrapper. It stays vertical even after I have applied the horizontal form class to it. "Form-control" works but form-horizontal doesn't. I also tried

config.form_class = "form-horizontal"

and still no change to my form.

[constantm]

I've found another solution that, although hacky, sort of works for horizontal forms here: https://gist.github.com/adamico/6510093

[tboyko]

@JoshMcCullough @diegodurs Thanks for the temporary solution!

[JoshMcCullough]

@diegodurs You're welcome!

[cschramm]

@marya-ivanovna

For active admin use

silence_warnings do
  inputs.each do |input_type|
    superclass = "SimpleForm::Inputs::#{input_type}".constantize
    new_class = Class.new(superclass) do
      def input_html_classes
        super.push('form-control')
      end
    end
    SimpleForm::Inputs.const_set(input_type, new_class)
  end
end

To overwrite the actual simple_form classes instead of creating global new ones, which interfere with formtastic and thus active admin. The silence_warning suppresses warnings produced by overwriting.

[rubytastic]

So all the code examples above for an updated initialiser what is the status of bootstrap 3 support now?

• Could someone please post an up2date initialiser to use for bootstrap 3 ?
• Plus a fixes.css/sass with the fixes for layout if needed?
• Or is there a bootstrap 3 branch/repo where the fixes an up2date read up what is not supported and what is supported?

I used this initialiser:
https://gist.github.com/mattclar/6315955#file-simple_form-rb

Thanks in advanche

[morenoh149]

@rubytastic it's still being worked on heartcombo/simple_form-bootstrap#28 come help us! :)

[jxdx]

None of my alert messages have a color, can anyone help with that?

[kevinelliott]

👍 on this fix.

[jmuheim]

👍 Looking forward for the final version.

[jfrux]

👍 Same! Hope it's soon 👯

[olivictor]

👍

[kolodovskyi]

https://github.com/kolodovskyy/simple_form_bootstrap3.git
we use it at our project
may be useful

[jmuheim]

@kolodovskyy Thanks a lot, I will definitely check it out. Are there any known shortcomings? In general, I think the documentation is a bit small, e.g. I have to browse the source code to see what wrappers are available.

[kolodovskyi]

yes, 2-3 days i will show a few examples for each wrappers. Shortcomings... maybe not, but need some additional wrappers for input-group and maybe remove one extra tag with datepicker. All other is OK with many form used in our project.

[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/

[senny]

@rafaelfranca ❤️ will try it soon.

[ReinierKorth]

form-horizontal doesn't work with Simple Form 3.1.0.rc1 on Rails 4.1.1 and Bootstrap 3 (bootstrap-sass 3.1.1.1)

[rafaelfranca]

@ReinierKorth we need more information about this. It seems working fine at http://simple-form-bootstrap.plataformatec.com.br/

[ReinierKorth]

The only way I can get the form-horizontal layout working is by setting config.default_wrapper = :horizontal_form (instead of vertical_form) inside the simple_form_bootstrap.rb but then all my form with be horizontal no matter what class i give them.

[rafaelfranca]

Please take a look at https://github.com/rafaelfranca/simple_form-bootstrap/blob/master/app/views/examples/_horizontal_form_sf.html.erb

[ReinierKorth]

I was just doing that :)

With the extra wrappers it works. Didn't know I had to include extra wrappers. Thanks for your help :)

[Shoroh]

What's wrong with 'submit button' in horizontal_form? It looks alone, but must be in a row with other inputs. How to add offset-class div to the button?

[rafaelfranca]

<%= f.button :submit, class: 'bla' %>

[Shoroh]

Button submit must be wrapped by div with offset class. If I just add class to the button it doesn't work correctly.

[rafaelfranca]

So it is also easy to do:

<div class='bla'>
  <%= f.button :submit %>
</div>

[Shoroh]

Actually, I know how html tags works, really )
It's just... I don't know, may be this is a bug, that's why I asked.

Look, all simple_forms goodness is a simple code, like this:

= f.input :foo
= f.input :bar
= f.submit

If I should use additional tags (like your example above), it became looks like usual code, not pretty at all )) Also, it looks like only horizontal_form has that issue, and I just thought it's a forgotten submit button bug. Other words, may be some wrapper must be added to simple_form_bootstrap.rb, or something.

Seems no )
Anyway, thanks for answer.

[rafaelfranca]

I see. For us Simple Form is a set of helpers but this doesn't mean you would not need to use HTML tags or other helpers. It is totally fine to use additional tags and we really recommend to do this.

submit doesn't use any wrapper code, only inputs does. This is by design, submit is just a button, it doesn't need any additional tags inside it (labels, hints, errors).

We could change the submit helper to generate that tag but some guys would want to not generate it too. For this reason and for clearly we prefer to not generate any additional tag with the submit helper.

[Shoroh]

Sounds reasonably, thanks for the gem )