Safari (formio.js >= 4.16.x): Columns component inside a Data Grid, the Columns are too narrow (unusable)

[bobslee]

Observed behavior

Browser

• The issue (below) occurs in the Safari browser (version 16.6).
• Issue doesn't occur in recent Firefox, Chrome.

Affected formio.js versions

• 4.14.x => Not affected (no issue)
• 4.15.x => Affected (has issue)
• 4.16.x => Affected (has issue)
• 4.17.x => Affected (has issue)
• 4.18.x => Affected (has issue)

Issue See the screenshots below. A Columns component inside a Data Grid: The Columns are too narrow (unusable).

I also tested with Bootstrap versions: 4.1.3, 4.4.1, 4.6.2 No differences with the formio.js versions above; has the same outcome.

Screenshots

Form: Data Grid with Columns inside

Form Builder: Columns component

Some "Column Properties" are too narrow.

[brendanbond]

Hey @bobslee thanks for reporting this. I'm unable to reproduce this on the form.io sandbox; that being said, I'll make sure this gets in front of the folks that prioritize these tickets, if I had to guess it's likely a CSS issue in the @formio/bootstrap repo.

[bobslee]

@brendanbond Thanks for answering and follow up. Yes indeed it seems a bootstrap CSS issue or missing markup in the Columns component template(s).

Concerning 1st screenshot (a form): In the form I did a workaround by either:

• Add class=cols-md-X to the other <div>s.
• A width: 100% could also help.

Concerning 2nd screenshot (form builder component): I didn't checked the "Columns Properties" (also a columns component) in the Columns component tab.

Thanks!