Giters

formio / formio.js

JavaScript powered Forms with JSON Form Builder

Home Page:https://formio.github.io/formio.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

bobslee opened this issue · comments

commented

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

image

Form Builder: Columns component

Some "Column Properties" are too narrow.

image
commented

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.

commented

@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!