An issues-only repository for the Bryntum project management component suite which includes powerful Grid, Scheduler, Calendar, Kanban Task Board and Gantt chart components all built in pure JS / CSS / TypeScript
Widgets which need to arrange form fields like the task and event editors could use it. The issue of spacing between form items is difficult now we cannot use gap.
The requirement is 0.6em (which should be in a variable) spacing in both axes between form fields. Currently, we use margin-bottom : 0.6em, and attempt to squash that for form fields which are on the last visible row. Horizontal spacing is even uglier. It relies on the b-inline class being added which adds margin-inline-end : 0.6em into the field's inner because adding margin to the outer means that the field's flex-basis is added to and makes the field wrap.
It should use display : grid.
Field labels can be synced automatically in this way by setting the field's outer element to be display : contents which means that it doesn't lay the label and the field wrap out, but leaves that up to the owning container's layout, so all labels will be in the same grid column.
Column spanning might be a challenge. The start and end pairs below require three grid columns, so for the others, their field inner would span 2 columns.
matsbryntse
commented
3 weeks ago
Widgets which need to arrange form fields like the task and event editors could use it. The issue of spacing between form items is difficult now we cannot use
gap.The requirement is
0.6em(which should be in a variable) spacing in both axes between form fields. Currently, we usemargin-bottom : 0.6em, and attempt to squash that for form fields which are on the last visible row. Horizontal spacing is even uglier. It relies on theb-inlineclass being added which addsmargin-inline-end : 0.6eminto the field's inner because adding margin to the outer means that the field'sflex-basisis added to and makes the field wrap.It should use
display : grid.Field labels can be synced automatically in this way by setting the field's outer element to be
display : contentswhich means that it doesn't lay the label and the field wrap out, but leaves that up to the owning container's layout, so all labels will be in the same grid column.Column spanning might be a challenge. The start and end pairs below require three grid columns, so for the others, their field inner would span 2 columns.