Feature request: Add multi-column form controls
Closed this issue · 4 comments
Some form controls look nicer laid out horizontal instead of vertical. A good example is City, State, and Zip being in a single row instead of 3 rows. How to do this in Bootstrap is somewhat intuitive, but doing it programmatically and within the form designer introduces a number of complications. This shouldn't be confused with an inline form where all controls are on the same row. This is possible with Bootstrap v3, v4, or v5.
The easiest approach is to give the form a 'row' class, then giving the controls a 'col' class. The complication comes with horizontal labeling which must be mutually exclusive? In that case each control is a 'row' with a 'col-2' label and a 'col-10' control.
The next obstacle is how to implement this in the Form Designer. Perhaps this could be by adding an addition setting for width with the default being 'full width'? Also add 'auto', and 1 to 12 for column size?
Initial coding has been fruitful. It doesn't require a complex solution. Will implement in Bootstrap v4, then Bootstrap 5, then likely Bootstrap 3. No plans to include Bootstrap 2 since it's somewhat deprecated and doesn't support this styling approach. Will test some, but can't guarantee there won't be some side-effects in unsupported frameworks.
Luckily, the sortable drag-n-drop widget and form designer easily supported this approach also. Again, when working with less than full-width controls isn't flawless.
There may be some ugly styling issues in certain scenarios with odd controls (in the same row), but in most cases, this option would be used for textcontrols or their subclasses.
Coding for Bootstrap 4 and 5 is near complete, though the same (simple) approach for Bootstrap 3 seems to mangle 'group' controls and tab content. Next coding step would be to implement this new 'width' as a parameter for template 'controls' instead of only with user created forms within the forms module.
Bootstrap 4/5 coding for standard forms appears to be working, however when the style is changed to 'labels on the side' it needs a bit of work. Bootstrap 3 support will not be added. Still trying to iron out a philosophy as to whether we should support multi-form columns in a multi-column form scenario. It will likely NOT be available since side-labels requires using rows and 2 columns and things get complicated quickly.
Likely outcome:
- Multi-Column output only available with standard form labeling
- Side label option regresses to normal vertical form controls
Implemented in recent code push