Element inside form-item can cause overflow

I will test this on Windows in current Chrome, FF, Edge and IE11.

Patch from #2 works fine in Firefox, Chrome and Edge. Unfortunately the problem still exists in IE11. Flex-box doesn't play well with "max-width".

Tested patch from #2 on macos. Works fine in latest Firefox, Chrome and Safari.

Just rerolled 3091497-2-form-item-overflow.patch

The IE11 issue mentioned in #5 is not addressed in the latest patch so the the problem still exists in IE11.

Rerolled and fixed the IE 11 issue. Good to know: IE default value for "overflow" is "visible" when using flex box. So setting it to "auto" did the trick.

Edit: gnah, patch name did not match comment number. Sorry.

Last patch failed because of wrong file paths. Let's try again.

Works for me! RTBC +1

The current solutions breaks focus effect on a lot of form elements:

Hello,

overflow:auto was creating issue.
Removed that and it worked for all.

Uploaded right name patch file.

I still can reproduce issue in IE11 reported in #2 (result is OK in FF, Chrome, Safari, IE Edge).
But we should fix it, cause IE11 is not used on small resolutions according to https://www.drupal.org/node/3079238

1.fixed the focus effect on a lot of form elements.
2.fixed the Element inside form-item can cause overflow.
Attached the screen shot for reference please review the patch.

Tested patch from #26 and focus is NOT OK

Tested patch from #29 and on my side green border bug is not reproduced anymore, but fields beyond block

Hi,
i couldn't reproduce the #30 issue, but am feeling some issue with the table,
so i think we need to make the table scrollable.

this will fix the issue.
core/themes/claro/css/components/tables.css

table {
display: block;
overflow-x: auto;
white-space: nowrap;}

Test the patch #29 attached the screen shot for reference. i couldn't reproduce the #30 issue.
@Indrajith KB thank you for the suggestion but it's not working in this case.

Hi @komalkolekar,
thanks for your #29 patch its working properly and fixing our current issue.
i was concerned about something (someone already addressed the issue with table https://www.drupal.org/project/drupal/issues/3132811 ), that's why i put my concern over here.

issue found fixed

I can still reproduce #27 with the most recent patch

Kindly review the attached patch.

Removing overflow-x: auto because there is no use of it, It's creating issue for focus border of preceding-actions element(last element before action cta).

SS
With overflow-x: auto
Desktop

Mobile

Without overflow-x: auto
Desktop

Mobile

Other field overlapping is because of the result table(already mentioned in #35)

Thanks!

Verified and tested by applying patch #42. Looks good to me.
Can be moved to RTBC.

Refer attached screenshots.

Thanks everyone for working on this! Good to see progress.

I read the issue summary and skimmed through the comments and it is difficult to know if this is fixed and what patch is to be committed. So, lets have an issue summary update using the issue summary template, the one that when using dreditor. The proposed resolution section should have before and after screenshots. There also needs to be evidence that this have been tested on the Supported browsers.

#48 Re-roll the patch for 9.3.x

#49 Re-roll the patch for 9.3.x

Patch #49, fixes 1. input fields overflow. 2. fixes #27, focus issue of input fields.

Updated IS

Verified and tested patch #49.
Patch applied successfully and looks good to me.

Testing Steps:
# Apply Claro theme from Appearance
# Goto: admin/content
# Press tab and check the focus on the Language input field

Expected Results:
# User should see an accurate focus on the Language input field while pressing the Tab key

Actual Results:
# User is not able to see an accurate focus on the Language input field while pressing the Tab key

Looks good to me.
Can be a move to RTBC.

patch failed in Drupal CI

#55 Fixed Custom Commands Failed, Please review the patch

Patch #55 Applied cleanly and User should see an accurate focus on the Language input field and unwanted overflow are removed.
Sharing screenshot for your reference.
RTBC

Applied patch #55 in drupal-9.3.x-dev
thanks for the patch
for ref sharing screenshots...

#45 has not been addressed.

@vikashsoni @Madhu kumar @chetanbharambe @Gauravmahlawat @DeepaliJ @IndrajithKB and anyone else I missed who's tested:

When testing issues such as this, please note the browser(s) you are testing with. See #45 for a link to the supported browsers. Ideally, you will explain all your testing steps or at least note the browser and that you followed the testing steps in the issue summary (if provided). Thanks.

Checked the patch in #55 still applies cleanly to 9.3 and 9.4 but does not apply to 10 (see below). A separate patch will need to be created for Drupal 10.

[drupal-10.0.x-dev/10.0.x] [drupal-10.0.x-dev]$ patch -p1 < 3091497.55.patch 
patching file core/themes/claro/css/components/form.css
Hunk #1 FAILED at 29.
1 out of 1 hunk FAILED -- saving rejects to file core/themes/claro/css/components/form.css.rej
patching file core/themes/claro/css/components/form.pcss.css
Hunk #1 succeeded at 15 (offset -2 lines).

Re-rolled #55 for 10.0.

Please see comment #61 before contributing to this issue. Thanks.

I have checked the issue in crome and firefox without applying patch.
Not able to get the issue.
I am using drupa10.1.x-dev version.
Refer to screenshots.

This issue is being reviewed by the kind folks in Slack, #needs-review-queue-initiative. We are working to keep the size of Needs Review queue [2700+ issues] to around 400 (1 month or less), following Review a patch or merge request as a guide.

I'm not seeing this in Drupal 10.1. Can someone please confirm at what breakpoint they are seeing this at? and add the before screenshot to the IS.

Also #45 called for an issue summary update which still needs to happen.

The last two comments in this issue have not been able to reproduce the problem stated in the Issue Summary. Nor have I on 11.x, firefox 114.4.0esr.

Therefore, closing as outdated. If you are experiencing this problem on a supported version of Drupal reopen the issue, by setting the status to 'Active', and provide complete steps to reproduce the issue (starting from "Install Drupal core").

Thanks!