[I had concerns about this when I started writing the issue, but as I wrote it up I convinced myself that it wasn't an issue. However, I wanted to leave what I wrote, in case it turns out to be a problem in the future.]
I Bootstrap 4, horizontal forms (forms with labels to the left of their input field) are implemented by adding a row or form-row class to the form-group around the field and label.
PR #315 contained commit 889112c, which added row to the markup rendered by the form_group helper, if layout: :horizontal was requested. Since form_group is called internally by most of the the bootstrap_form helpers, this means that almost every label-field pair will be marked up as a separate row when layout: :horizontal is requested, with no way I can see to prevent it.
I can see situations where this might be inconvenient:
- If I wanted a horizontal form with city, state, and ZIP fields across the same row, how would I code that?
It could be argued that that's an usual design and we don't need to make it easy. However, the design is relatively easy to achieve in "raw" Bootstrap 4, buy wrapping all three fields in a single form-group row div https://www.bootply.com/hxulE8V7LZ
- Since legacy, aka version 2.7, doesn't add the row class to form groups, one would assume that people have designed their templates to provide the row where needed. When they migrate to
bootstrap_form v 4.x, they may see changes to their layouts, and they may have to change templates and/or calls to helpers. Do we want users to have to make these changes along with other changes they may have to make with Bootstrap 4?
- In Bootstrap 4, you have the option of using
row, or form-row. (The latter gives you smaller gutters.) How can we provide that option to developers using bootstrap_form?
One solution is to mostly just accept that that's the way Bootstrap 4 works:
- Add to the documentation explicit advice that a horizontal layout is not for laying out multiple fields across a row. Tell developers that if they want to do this, they should use the default layout (meaning labels above fields), and mark up the grid themselves
- Have a paragraph or two in the upgrading document to highlight that people who have horizontal forms with multiple fields across one row, that they may have to review their form layout before upgrading
- Add some code to detect if the user adds
form-row as a class to a form group or input helper, and replace the row with form-row, rather than simply adding form-row as another class
I believe the above is acceptable.
If we did want to support horizontal forms with multiple fields across a row, we'd have to find a way to suppress the generation of a form-group around input fields. One way would be to simply add a form_group: false option to the helpers that generate a form-group. The nice thing about this is that it can be added without disrupting existing functionality, so we can wait to see if users report issues with horizontal forms.
Bonus marks if we could figure out a way to do this at the form level such that stand-along fields would still get any needed form-group, but fields within a row would not.
[I had concerns about this when I started writing the issue, but as I wrote it up I convinced myself that it wasn't an issue. However, I wanted to leave what I wrote, in case it turns out to be a problem in the future.]
I Bootstrap 4, horizontal forms (forms with labels to the left of their input field) are implemented by adding a
roworform-rowclass to theform-grouparound the field and label.PR #315 contained commit 889112c, which added
rowto the markup rendered by theform_grouphelper, iflayout: :horizontalwas requested. Sinceform_groupis called internally by most of the thebootstrap_formhelpers, this means that almost every label-field pair will be marked up as a separate row whenlayout: :horizontalis requested, with no way I can see to prevent it.I can see situations where this might be inconvenient:
It could be argued that that's an usual design and we don't need to make it easy. However, the design is relatively easy to achieve in "raw" Bootstrap 4, buy wrapping all three fields in a single
form-group rowdiv https://www.bootply.com/hxulE8V7LZbootstrap_formv 4.x, they may see changes to their layouts, and they may have to change templates and/or calls to helpers. Do we want users to have to make these changes along with other changes they may have to make with Bootstrap 4?row, orform-row. (The latter gives you smaller gutters.) How can we provide that option to developers usingbootstrap_form?One solution is to mostly just accept that that's the way Bootstrap 4 works:
form-rowas a class to a form group or input helper, and replace therowwithform-row, rather than simply addingform-rowas another classI believe the above is acceptable.
If we did want to support horizontal forms with multiple fields across a row, we'd have to find a way to suppress the generation of a
form-grouparound input fields. One way would be to simply add aform_group: falseoption to the helpers that generate aform-group. The nice thing about this is that it can be added without disrupting existing functionality, so we can wait to see if users report issues with horizontal forms.Bonus marks if we could figure out a way to do this at the form level such that stand-along fields would still get any needed
form-group, but fields within a row would not.