Select form field values are hidden at narrow screen widths in Claro theme

Similar bug seems to exist in Seven:

Based on some quick testing, it seems like this is caused by width: 100%. It seems like something that should not probably be set for select elements. It also seems like we might want to consider removing width: 100% from any type of form element that is rendered inside a table.

Patch attached for both 9.4.x and 10.0.x.

My approach is to use the @supports syntax for 9.4.x. So the IE experience won't have the <select> elements stretch to their containers in IE. IMHO, that's fine.

It does make the table larger than the container, but tables are really horrible for mobile anyway, so that's a larger issue.

This seems like a nice improvement. However, it seems like in Safari and Firefox, the <td> doesn't resize according to the <select> width:

🤦‍♂️Safari.

The new patches fix that issue. Tested on Chrome, Safari, and Firefox.

HI, patch #9 working fine for me,
It solves the "select element out of visibility issue on narrow widths".
(tested with: drupal-9.4.x-dev. Theme: claro).

it seems the last patch (#9) were compiled incorrectly in D9. see 3159896-patch-9.png

So I modified the patch, and it is now compiled properly. see 3159896-9-4.x-css-fixes.patch

with the Drupal 10 patch, it works fine.

fix the patch as the last one failed the test.

Thanks @awangsetyawan. Please make sure to add an "interdiff" when modifying patches:

https://www.drupal.org/docs/develop/git/using-git-to-contribute-to-drupa...

so that people can easily see what was changed between the old and new patch.

Also, it's customary to upload a `.patch` file rather than a `.diff` file. Thanks.

Looking at #12 vs #9, I do see that some extra CSS was removed which seems correct:

Old:

+td > .form-item > .form-element,
+td > .ajax-new-content > .form-item > .form-element {
+    td > .form-item > .form-element,
+    td > .ajax-new-content > .form-item > .form-element {

New:

+td > .form-item > .form-element,
+td > .ajax-new-content > .form-item > .form-element {

and added a missing semi-colon.

So, I'm confused how it worked in #10.

This needs testing on:

1. 9.4 - Chrome
2. 9.4 - Firefox
3. 9.4 - Safari
4. 10.0 - Chrome
5. 10.0 - Firefox
6. 10.0 - Safari

The patch file in #12 is ending with .diff, re-uploading with .patch file. Apologies with this inconvenient.

Thanks @awangsetyawan. I checked and see that the patches in #12 and #15 are the same except for the file extensions.

This still needs manual testing.

Updating title and issue summary to clarify the issue a bit and add some general steps to reproduce.

One more tweak :)

Testing Steps :
1. Go to Appearance -> Verify the Claro theme is selected
2. Go to https://8080-shaal-drupalpod-wctq62a5ocf.ws-us33.gitpod.io/en/admin/stru... (Home>Administration>Structure>Content types>Article
3. Now right click and inspect the element and verify the UI of Select form field values are hidden at narrow screen widths

Note : I have verified in
Expected Results: Select form field values should display at narrow screen widths

Actual Results: Select form field values should display at narrow screen widths

Please refer the screenshot below attached in the file :
Screenshot 2022-02-21 at 9.16.20 AM.png
Screenshot 2022-02-21 at 10.40.48 AM.png

Thanks @Satyajit1990. Are you sure you were testing with a narrow width? You should be able to see the whole table at that width and it doesn't look like in your screenshot (there is stuff outside the viewport).

Now I'm wondering if you are experiencing this issue with mobile tables so I'm a bit confused: #3068696: Tables overflow on mobile

Seems to be a duplicate of #3135457: Select widths not taken into account when table is rendered but I haven't compared the patches.

I tested the patch mentioned in #22 and it only corrected select items. #15, however corrected fixed the issue for text input fields as well (which was the issue I was experiencing when attempting to set row weights). Tested on 9.4.8 (Claro admin theme).

+1 for RTBTC

Updating status to RTBTC (missed that step in the last comment, sorry)

Re-queued tests for two patches:

• My D10 patch from #9
• @awset's D9 patch from #15

This causes a regression for field cardinality which is also rendered in table. Previously the textfield would scale to the width of the screen but now the fields are adding horizontal scroll and do not scale as browser is resized.

Closing #3135457: Select widths not taken into account when table is rendered as a duplicate of this issue.

Updated the code for select field only, Attache interdiff with #15. please review

Able to reproduce the issue using the steps in the IS.
Applied patch #32 on drupal 10.1.x-dev
The patch applied cleanly

The select field width issue on the narrow screen has been resolved after applying the patch.
But can see a horizontal scroll.

Refer to the attached screenshots
Before patch:

After patch:

Closed #2807831: Region select option is very small on narrow screens as a duplicate so adding credit here.

I will double check this patch and update here

Patch is tested and it is working fine on mobile device or narrow screens.

Looking forward to seeing this fixed.

Sorry for the noise, I realised this isn't actually a duplicate because it only addresses Claro. The comment with screenshots from Seven made me think it would be addressed more widely but I saw the patch is just for Claro! So removing the credits and I will re-open the other issue.

I like that this is now only targeting the select because that makes this less likely to run into problems.

+++ b/core/themes/claro/css/components/tables.pcss.css
@@ -172,6 +172,19 @@ td > .ajax-new-content > .form-item > .form-element {
+td > .form-item > select.form-element,
+td > .ajax-new-content > .form-item > select.form-element {
...
+  td > .form-item > select.form-element,
+  td > .ajax-new-content > .form-item > select.form-element {

Instead of select.form-element, we could use .form-element--type-select as the selector.

Addresses the point from #45.
Please review.

Screenshots from latest patch:

Verified the patch #46 and tested it on Drupal version 10.1.x. The issue seems to be fixed after applying the patch. The select form fields are now visible and the user can scroll horizontally to view all the fields and settings section. I have added the before patch screenshot and after patch screen recording for reference. RTBC+1

Can the before/after screenshots be added to the issue summary. To show this is fixed.

Also the proposed solution is a bit vague. How is it being fixed? From what I can tell it adds a horizontal scroll is that the desired solution?

Added #3068696: Tables overflow on mobile as related. To answer @smustgrave I think the horizontal scroll is the only way to fix this particular issue without some other, major changes to responsive tables, which are out of scope for this issue.

In that case looks good thanks for the quick response!

Posted separate patches for 9.x and 10.x

#55 appears to address $54

Committed ad02e3e and pushed to 10.1.x. Thanks! Cherry-picked to 10.0.x and committed to 9.5.x.