Back to Listing

Additional Field Layout Options

From a frontend layout perspective this is probably a rather big feature but it would be nice anyway:

It would be great if we could assign widths to each field of a table to achieve a multi column layout for the table's editing page. In kirby (an document based cms) this is possible for example.

The editing page:

could me made look more like this:

just by assigning "width: 1/2" to the last 4 fields.

The result is a much more compact and nicer layout.

been thinking about this one for years! Especially useful for things like lat/lon or address inputs. I'd love to figure this out, but here are a few things we'd need to consider before moving forward with this update:

UIs: Which UIs can support this? All of them? They could responsively adjust to less width – but some are more conducive to the smaller horizontal space. I wonder if it's easier to only support some (eg: text inputs) Design: Currently the design guarantees that the fields are fairly standardized. It's difficult to miss inputs since they are all left aligned and delineated with a HR. What happens with very different heights between adjacent UIs? Weird gaps? Labels: Each field currently has a dedicated/reserved label area – this is used for field comments and bulk-edit checkboxes. Fields labels would have to be shifted to be similar to Kirby, so we'd need to rethink some things. Widths: Would 50% be the only option? Would 33.3% also work? Responsiveness: since all the UIs require different ideal widths, at what point (if any) do we break the side-by-side fields to become stacked?

UIs: which UIs would be bigger?

design: If two neighboring UIs have different heights in kirby the smaller one just has spacing below it:

I think that's fine.

Labels: I agree, that's probably one of the strongest problems

Widths: In kirby multiples of 1/2, 1/3, 1/4 or 1/5 are supported. In my opinion 1/2 and 1/3 would be enought.

Responsiveness: kirby stacks the fields if the viewport get's to narrow.

The implementation is pretty straightforward: The field's container elements just get's a class like field-grid-item-1-3 assigned which sets it's width to 33% and css float is use to put all grid-items next to each other. If two items do not fit next to each other they will break. It just requires that the field itself adjusts to it's container size.