New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bootstrap 3 compatibility #857

Closed
mrfoto opened this Issue Aug 3, 2013 · 81 comments

Comments

Projects
None yet
@mrfoto

mrfoto commented Aug 3, 2013

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

@josevalim

This comment has been minimized.

Member

josevalim commented Aug 3, 2013

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

This comment has been minimized.

warmwaffles commented Aug 4, 2013

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

This comment has been minimized.

Collaborator

carlosantoniodasilva commented Aug 5, 2013

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

This comment has been minimized.

findrails commented Aug 5, 2013

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

This comment has been minimized.

Collaborator

carlosantoniodasilva commented Aug 5, 2013

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

This comment has been minimized.

paav-o commented Aug 9, 2013

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

This comment has been minimized.

warmwaffles commented Aug 9, 2013

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

This comment has been minimized.

johnnyshields commented Aug 9, 2013

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

This comment has been minimized.

AlJohri commented Aug 13, 2013

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

@warmwaffles

This comment has been minimized.

warmwaffles commented Aug 13, 2013

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

@AlJohri

This comment has been minimized.

AlJohri commented Aug 13, 2013

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

rafaelfranca/simple_form-bootstrap#26 (comment)

@rafaelfranca

This comment has been minimized.

Collaborator

rafaelfranca commented Aug 14, 2013

Could you guys try master branch?

@AlJohri

This comment has been minimized.

AlJohri commented Aug 15, 2013

@rafaelfranca Is the master branch Rails 4 only?

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

@carlosantoniodasilva

This comment has been minimized.

Collaborator

carlosantoniodasilva commented Aug 15, 2013

@AlJohri yes.

@carlosantoniodasilva

This comment has been minimized.

Collaborator

carlosantoniodasilva commented Aug 15, 2013

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

This comment has been minimized.

Collaborator

carlosantoniodasilva commented Aug 15, 2013

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

@johnnyshields

This comment has been minimized.

johnnyshields commented Aug 15, 2013

@carlosantoniodasilva I definitely plan to use BS3 with Rails 3.2

@carlosantoniodasilva

This comment has been minimized.

Collaborator

carlosantoniodasilva commented Aug 15, 2013

@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

This comment has been minimized.

garrettlancaster commented Aug 15, 2013

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

This comment has been minimized.

johnnyshields commented Aug 15, 2013

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

@mrfoto

This comment has been minimized.

mrfoto commented Aug 15, 2013

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

@neb2000

This comment has been minimized.

neb2000 commented Aug 15, 2013

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

@mrfoto

This comment has been minimized.

mrfoto commented Aug 15, 2013

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

@rafaelfranca

This comment has been minimized.

Collaborator

rafaelfranca commented Aug 15, 2013

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
.

@mrfoto

This comment has been minimized.

mrfoto commented Aug 15, 2013

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

@neb2000

This comment has been minimized.

neb2000 commented Aug 15, 2013

@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

@mrfoto

This comment has been minimized.

mrfoto commented Aug 15, 2013

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

@rafaelfranca

This comment has been minimized.

Collaborator

rafaelfranca commented Aug 15, 2013

@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

This comment has been minimized.

zapnap commented Aug 16, 2013

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

This comment has been minimized.

constantm commented Oct 5, 2013

@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

This comment has been minimized.

fadeojo commented Oct 5, 2013

@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

This comment has been minimized.

constantm commented Oct 6, 2013

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

@tboyko

This comment has been minimized.

tboyko commented Oct 15, 2013

@JoshMcCullough @diegodurs Thanks for the temporary solution!

@JoshMcCullough

This comment has been minimized.

JoshMcCullough commented Oct 15, 2013

@diegodurs You're welcome!

@cschramm

This comment has been minimized.

cschramm commented Nov 5, 2013

@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

This comment has been minimized.

rubytastic commented Dec 2, 2013

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

This comment has been minimized.

Contributor

morenoh149 commented Dec 2, 2013

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

@jxdx

This comment has been minimized.

jxdx commented Dec 17, 2013

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

@kevinelliott

This comment has been minimized.

kevinelliott commented Feb 27, 2014

👍 on this fix.

@jmuheim

This comment has been minimized.

jmuheim commented Feb 27, 2014

👍 Looking forward for the final version.

@jfrux

This comment has been minimized.

jfrux commented Mar 14, 2014

👍 Same! Hope it's soon 👯

@olivictor

This comment has been minimized.

olivictor commented Mar 27, 2014

👍

@kolodovskyy

This comment has been minimized.

kolodovskyy commented Apr 4, 2014

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

@jmuheim

This comment has been minimized.

jmuheim commented Apr 5, 2014

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

@kolodovskyy

This comment has been minimized.

kolodovskyy commented Apr 5, 2014

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

This comment has been minimized.

Collaborator

rafaelfranca commented Apr 14, 2014

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

This comment has been minimized.

Contributor

senny commented Apr 15, 2014

@rafaelfranca ❤️ will try it soon.

@ReinierKorth

This comment has been minimized.

ReinierKorth commented May 20, 2014

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

This comment has been minimized.

Collaborator

rafaelfranca commented May 20, 2014

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

@ReinierKorth

This comment has been minimized.

ReinierKorth commented May 20, 2014

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

This comment has been minimized.

@ReinierKorth

This comment has been minimized.

ReinierKorth commented May 20, 2014

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

This comment has been minimized.

Shoroh commented Jun 18, 2014

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

This comment has been minimized.

Collaborator

rafaelfranca commented Jun 18, 2014

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

@Shoroh

This comment has been minimized.

Shoroh commented Jun 18, 2014

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

@rafaelfranca

This comment has been minimized.

Collaborator

rafaelfranca commented Jun 18, 2014

So it is also easy to do:

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

This comment has been minimized.

Shoroh commented Jun 18, 2014

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

This comment has been minimized.

Collaborator

rafaelfranca commented Jun 18, 2014

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

This comment has been minimized.

Shoroh commented Jun 18, 2014

Sounds reasonably, thanks for the gem )

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