Form items inside multiple value tables not scaling correctly

Created on 29 September 2016, about 8 years ago
Updated 9 August 2024, 3 months ago

Problem/Motivation

When form fields are given unlimited cardinality, they are placed in a table. When the page responsively re-sizes, at some widths, the fields inside the table cease to scale. This causes other elements to overlap them, making them difficult or impossible to use. This is not an issue when the fields are not in the multiple cardinality table.

This case is made worse when Vertical Tabs come in to play. Even though these are themselves responsive so that they become accordions at a set width, unless you are willing to set the accordion breakpoint setting very high (1480px+) the issue persists.

This is an issue across at least the following: Chrome 53, Firefox 49.

See screenshots for more details.

Proposed resolution

Add in specific css rules and breakpoints for the points at which the layout breaks for multiple cardinality fields.

Remaining tasks

  • Test across more use/edge cases
  • Investigate if this is the best way to achieve a "fix" or if it is a bit heavy-handed.

User interface changes

Add a rule to set these elements to use 100% width at certain breakpoints when they appear inside multiple cardinality tables, or inside multiple cardinality tables inside vertical tabs.

API changes

None

🐛 Bug report
Status

Needs review

Version

1.0

Component

Code

Created by

🇬🇧United Kingdom a.hover

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024