Claro long select options stop responsive layout

I can replicate this issue when select option has very long text, I have provided a patch to fix it.

The Needs Review Queue Bot → tested this issue.

While you are making the above changes, we recommend that you convert this patch to a merge request → . Merge requests are preferred over patches. Be sure to hide the old patch files as well. (Converting an issue to a merge request without other contributions to the issue will not receive credit.)

@swatidhurandhar I am not able to replicate this issue.
Can you please provide steps with screenshots?

Working Fine from my end.

@Nitin shrivastava Steps are mentioned in the description.
1) Create a vocabulary and create a taxonomy term in it which is at least 112 characters long.
2) Add the taxonomy in a content type and change the autocomplete to select list in manage form display.
3) Now add content in same content type, and now you can see the page is broken due to select list.

I have opened a MR for fixes.

The Needs Review Queue Bot → tested this issue. It fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

This does not mean that the patch needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

@swatidhurandhar Yes, I'm replicating the issue, but I believe this isn't a bug; it falls more into the category of a feature request. The width will adjust based on the character length of the taxonomy name.
Patch apply successfully.
Before Patch

After Patch.

The Needs Review Queue Bot → tested this issue. It fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

This does not mean that the patch needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

I have checked the above screenshots and tried to replicate the issue. I don't think this is an issue i believe this is the select list default behaviour
@ice70 Can you share some screenshots where you are facing issues?

Hi @shweta__sharma

[with-select.png] shows the default layout with the taxonomy select that has some really long text.
A gap appears on the left side of the main edit column and the total page width becomes larger than the browser window creating horizontal scrolling. The right side of the page will not be visible from about 1024px, unless the user scrolls to the right shown in [hidden-right-side.png]

[without-select.png] shows the result of deleting the select object via chrome inspection. Once the select has gone, the two columns flow to the browser width and the page remains in the visible area.

When the layout collapses to a single column structure, the select changes to variable width and stays within the visible area [mobile.png] - I had a look around to see how this was working but could not see it to replicate on the higher browser widths.

Thank you for your help.

This needs work as 34.3rem sounds like a pretty magical number to me

alex.87 → made their first commit to this issue’s fork.

Personally, I don't think this is an issue, it is just how the select list works across the browsers.

But in case I'm wrong I submitted a new MR with a small change. I changed `34.3rem` to 100% as the first one is not working well with the small devices.

MR should be updated for 11.x as the current development branch.

Issue summary should be updated with proposed solution.+ before/after screenshots in the UI section. Please use full default issue template.

• Tested on Screen Resolution Test:1366 X 768
• OS - windows 11 pro
• Browser - latest chrome
• Data characters used 132 and 252.
• Experiencing the addition of a horizontal scroll at the bottom that is adversely affecting the overall UX.
• Attached screen recording

Added default issue template and updated IS
Thanks

Hi @amietpatial

As you tested the issue can you please test Merge request !5582? so that we can update the IS

Thanks

Created MR against 11.x.

Please ignore the !5582 and test the !6291. I can't close the !5582 because I was not the original creator of the MR.

Added Before/After screenshot. Updated summary to match the latest code that is different after pulling the latest 11.x.

Hi
Tested on
Drupal version 11.0
Screen Resolution Test:1366 X 768
OS - ubuntu
Browser - latest chrome
characters- above 150
Test Result :
Unable to reproduce the issue, It looks good for D11 without a patch but I observed characters of long text overlapping on the search icon

Attached screenshot

Keeping in Needs Review state

Kanchan Bhogade please use the testing steps from the IS. Create a new taxonomy, or edit the existing one, create a long term, and add it as a select list to the node, do not use the autocomplete.

Not sure which MR is to be reviewed. Both seem to have failures though.

Gauravvvv → changed the visibility of the branch 3403628-claro-long-select to hidden.

MR #6291 needs to be reviewed, as it has the latest changes. I have updated the MR, as earlier it was only targeting .form-element--type-select but this is happening on .form-element--type-select-multiple multiple select field as well. please review

@Gauravvvv, I've tested MR- MR !6291 mergeable on-
Drupal version -11.0-dev,
Screen Resolution Test:1366 X 768
OS - Mac
Browser - latest chrome
Characters- above 112,

Testing Results
Before the patch, The field width was adjusted based on the character length of the taxonomy name, but the field was aligned with the other field in the form- added before result. I applied the patch as well & after applying the patch- the field size increased (which is not aligned with other fields) and while I re-arranged the fields in the form, some part of the field is also hidden under the Right section of the form- Added after results. Keeping this in Need review.

MR 6291 appears to have failures.

So in https://www.drupal.org/project/drupal/issues/3291549 📌 Refactor Claro's "node form" layout to not use floats Fixed we changed the layout-node-form to use `grid` instead of `float`, and a combination of a grid and long select is causing these issues, still looking for the best solution, but if I use flex instead of the grid all of the issues with nested elements are resolved.

This issue is not reproducible in Drupal core version 11.x. Tried with single select field and multiple select field. Please find the screenshots attached.

But I noticed that last few texts are getting trimmed in the list if it is more that the width of the dropdown. I feel atleast some ellipses should be shown to indicate that there are more text.

I faced with a similar problem. In my case, we are using paragraphs with a select list with really long options. So, the select list visually breaks subforms.
Changes from comment #15 have limited usage. They can't help if your select list wrapper is less than 60rem(my case).
I think that we can solve the issue by providing a display grid on the select list wrapper(class .form-type--select) this change limits the select list to the 1fr width, so it won't overflow. However, this fix provides another issue. The display grid forces select lists to use the full width of the grid column. Hence, a small select list(say their options aren't longer than 5 characters) will take all available space. If we apply 'width: fit-content' straight to the select tag it solves an issue with the small select lists but brings back an issue with the overflow.
I can't recognize a better solution than a display grid for the select lists, but I can't find any CSS trick to apply it only to overflow items.
So for the moment, I can leave only a small tip for people who are faced with the same problem:

1. Attach custom CSS library for Claro(if it is used as an administrative theme)
2. Provide the display grid styles in the custom library for the wrapper for the select list that overflows.

FYI: The provided solution can trim a text of options. For the moment, it seems like some browsers may have an issue with the text wrapping, so it is better to use libraries for the select list customization.