bootstrap_form icon indicating copy to clipboard operation
bootstrap_form copied to clipboard

Allow disabling form_group generation per field

Open wingrunr21 opened this issue 11 years ago • 16 comments
trafficstars

I had a use case today where I wanted to append asterisks after the required inputs. Best way I can think to handle use cases like this is to simply allow disabling the form_group generation. Users can use the existing form_group helper to create the markup they want.

This would also give people the ability to have two text inputs inline with each other (eg for first name, last name collection) while living within the same form_group

wingrunr21 avatar May 04 '14 12:05 wingrunr21

I've run into this as well and have hacked around it by adding a bunch of additional divs to float the inputs next to each other, which is pretty nasty. This would be a nice improvement.

potenza avatar May 05 '14 22:05 potenza

I monkey-patched this yesterday for my current project using an additional no_form_group option that can be passed to any form control. You can see the initializer and a mini usage here: https://gist.github.com/dkoch/9c3c269d77a22b19ef07. It's not a big change, essentially just an added if-block in form_group.

If this is acceptable behaviour (and ruby-ish enough) I can add some tests and submit a pull request, just let me know.

dkoch avatar May 10 '14 08:05 dkoch

@dkoch Cool. This seems simple enough to me. @wingrunr21 thoughts? The only minor thing I'd suggest is changing the option label to :skip_form_group

potenza avatar May 12 '14 18:05 potenza

I'm more of the opinion that form_group_builder should handle the option. form_group itself should never be aware. ie, why call form_group with form_group: false and then not get a form group back? I think some code needs to be refactored to support this feature.

wingrunr21 avatar May 12 '14 18:05 wingrunr21

A big +1 for this. I have several places where City/State/Zip should appear inline inside one form group. Pretty much impossible now (at least I haven't been able to figure it out). I prefer the form_group: false option style for controls.

threadhead avatar May 13 '14 14:05 threadhead

@wingrunr21 check out the latest commit for the _without_bootstrap suffix. Seems like a good solution for this problem:

<%= f.form_group do %>
  <div class="row">
    <div class="col-xs-2">
      <%= f.text_field_without_bootstrap :city, class: "form-control" %>
    </div>
    <div class="col-xs-3">
      <%= f.text_field_without_bootstrap :state, class: "form-control" %>
    </div>
    <div class="col-xs-4">
      <%= f.text_field_without_bootstrap :zip, class: "form-control" %>
    </div>
  </div>
<% end %>

potenza avatar Jul 18 '14 17:07 potenza

Hmm, I'm glad there's a solution for this at the moment but that is pretty verbose. I still think I'm partial to a form_group:false option.

wingrunr21 avatar Jul 18 '14 18:07 wingrunr21

It would be pretty similar though, no? For instance, if you wanted to use this for your original use case to put asterisks around the field, it might look like:

_without_bootstrap:

*<%= f.text_field_without_bootstrap :email %>*

vs form_group: false:

 *<%= f.text_field :email, form_group: false %>*

It also feels cleaner to me to avoid putting this logic in form_group_builder and passing it straight through to the original helpers.

If _without_bootstrap feels too verbose, what about a different suffix?

potenza avatar Jul 18 '14 18:07 potenza

Well, using form_group:false would output the exact same HTML minus the form_group wrapper. Using _without_bootstrap still requires you to mark up any original fields in the same way that the form builder does.

wingrunr21 avatar Jul 18 '14 18:07 wingrunr21

Ah, yeah, I see your point. When I was thinking about your original use case (asterisks around the field), it totally makes sense. But for something like city, state, and zip, you do end up doing a lot of manual work.

potenza avatar Jul 18 '14 18:07 potenza

I'd also need this. Is there any progress?

fabn avatar Jan 11 '16 23:01 fabn

This is a pretty big point of annoyance when it comes to trying to render multiple inputs inline:

<div class="row">
  <div class="col-md-12">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-addon">%</span>
      <span class="input-group-addon">at</span>
      <span class="input-group-addon">$</span>
      <input type="text" class="form-control">
      <span class="input-group-addon">.00</span>
    </div>
  </div>
</div>

Any chance this is getting worked on?

gradybarrett avatar Mar 03 '17 22:03 gradybarrett

If someone is willing to contribute, I will consider merging a PR that adds the form_group: false feature, provided it comes with tests and docs. 👍

mattbrictson avatar Mar 03 '17 23:03 mattbrictson

Those who are following this issue: could you please test the branch in PR #259 to see if it is a good solution? Let me know! If it gets a positive response I'll merge it.

mattbrictson avatar May 08 '17 03:05 mattbrictson

Hey Matt that would be great

aminbs avatar Jul 07 '17 12:07 aminbs

+1, as shown here: https://getbootstrap.com/docs/4.0/components/forms/#form-grid

Form grid's don't use form-group wrappers

jeffblake avatar Jan 14 '18 17:01 jeffblake

I think we have enough options to cover these use cases now.

donv avatar Sep 08 '23 12:09 donv