Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
bobslee opened this issue Dec 6, 2023 · 3 comments
Assignees

Comments

@bobslee
Copy link
Contributor

bobslee commented Dec 6, 2023

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
bobslee added a commit to novacode-nl/odoo-formio that referenced this issue Dec 7, 2023
Workaround for Safari 16.6 (AFAIK), with Columns in a Data Grid.
The Columns become too narrow and unusable in a Data Grid.
GitHub issue: formio/formio.js#5426

This workaround adds 1 CSS rule, which adds a `width: 100%` to the
first `<td/>` (column) targeted in a Data Grid table.

    width: 100%;
}
@brendanbond
Copy link
Contributor

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
Copy link
Contributor Author

bobslee commented Dec 8, 2023

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

bobslee added a commit to novacode-nl/odoo-formio that referenced this issue Dec 8, 2023
Workaround for Safari 16.6 (AFAIK), with Columns in a Data Grid.
The Columns become too narrow and unusable in a Data Grid.
GitHub issue: formio/formio.js#5426

This workaround adds 1 CSS rule, which adds a `width: 100%` to the
first `<td/>` (column) targeted in a Data Grid table.

    width: 100%;
}
bobslee added a commit to novacode-nl/odoo-formio that referenced this issue Dec 11, 2023
bobslee added a commit to novacode-nl/odoo-formio that referenced this issue Dec 11, 2023
@lane-formio
Copy link
Contributor

I'm gonna go ahead and close this as it looks all be resolved in the 5.x version of formio.js. We've also added a "Hide Preview" button in the editor to improve the UX when editing components that have columns.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants