bootstrap_form
bootstrap_form copied to clipboard
Allow disabling form_group generation per field
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
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.
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 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
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.
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.
@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 %>
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.
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?
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.
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.
I'd also need this. Is there any progress?
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?
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. 👍
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.
Hey Matt that would be great
+1, as shown here: https://getbootstrap.com/docs/4.0/components/forms/#form-grid
Form grid's don't use form-group wrappers
I think we have enough options to cover these use cases now.