Problem/Motivation

Input fields width inside a table can break on mobile making the input value unreadable.

Claro theme broken input in tables

Steps to reproduce

  • Fresh drupal installation
  • Configure claro as site admin theme
  • Go to form display settings of basic page content type /admin/structure/types/manage/page/form-display
  • Set browser screen width to 411px or use a mobile device

Proposed resolution

Add a breakpoint to handle the form-element width differently on mobile.

CommentFileSizeAuthor
#10 after_patch_iphone5.png50.73 KBmarcusvsouza
#10 after_patch_411px.png61.09 KBmarcusvsouza
#8 After-patch.png29.66 KBmitthukumawat
#4 Form element width (Responsive).png73.02 KBmitthukumawat
#4 Form element in Galaxy S5.png66.82 KBmitthukumawat
claro-theme-broken-input-mobile.png39.41 KBmhawwari

Issue fork drupal-3205412

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mhawwari created an issue. See original summary.

mhawwari opened merge request !461

mhawwari’s picture

mhawwari commented
Issue summary: View changes
Status: Active » Needs review

Adding a breakpoint to change the width to "inherit" fixes the problem for me.
Only local images are allowed.

mitthukumawat’s picture

mitthukumawat commented
StatusFileSize
new Form element in Galaxy S5.png66.82 KB
new Form element width (Responsive).png73.02 KB

In Mobile responsive the table is showing fine to me. But when I switched to Galaxy S5 and Iphone 5/SE, the width of form elements inside the table is becoming narrower. I have added the changes from merge request https://git.drupalcode.org/project/drupal/-/merge_requests/461 but still I can see the width showing narrower in mobile devices.

mhawwari’s picture

mhawwari commented

@mitthukumawat My changes were only added to the claro theme, which from your screenshots doesn't look like you're using it.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mitthukumawat’s picture

mitthukumawat commented

@mhawwari Thanks for correcting me, I have checked in claro theme and this issue is fixed now. Adding screenshot for reference. RTB+1

mitthukumawat’s picture

mitthukumawat commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new After-patch.png29.66 KB

Screenshot after patch.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Needs review

This is nice improvement! I posted one question on the MR. It would be great if we could land #3205412: Form element in tables is not readable on mobile before this, but I don't think that's necessarily a hard blocker for this.

marcusvsouza’s picture

marcusvsouza commented
StatusFileSize
new after_patch_411px.png61.09 KB
new after_patch_iphone5.png50.73 KB

The patch solves the problem in mobile, I attached two different sizes of mobile devices.

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Status: Needs review » Closed (duplicate)
Related issues: +#3135457: Select widths not taken into account when table is rendered

This is a duplicate of #3135457: Select widths not taken into account when table is rendered, that issue uses width: auto instead of width: inherit but otherwise the same solution. Keeping that one because the issue summary is a little more detailed and it was created ~10 months before this one.