Problem/Motivation

When an International Phone field is added to a content, and the full list of country codes are displayed in the "Form display" configuration form, that list is displayed on the same line (no wrapping).

That list should be wrapped when reaching the table right side. The consequence is that a horizontal scrollbar appears, and the configuration Edit button is pushed waaaay to the right.

A simple fix is to add this CSS: 

.field-plugin-summary {
  overflow-wrap: break-word;
}

Steps to reproduce

  1. Install and activate the International Phone module;
  2. Add an "International phone" field to a content;
  3. Go to the "Form display" tab and select some country and exclude others;

Excluded countries configuration

You should see a (very) long list of excluded countries displayed in the same line, making a horizontal scrollbar appear.

Excluded countries list in one line

Proposed resolution

Make the list wrap by adding the CSS: overflow-wrap: break-word;.

Excluded countries list wrapping

Remaining tasks

No remaining tasks. Only CSS fix is needed.

User interface changes

No UI changes.

API changes

NO API changes.

Data model changes

No Data model changes.

Release notes snippet

Fix the overflow wrapping of long text in the Field

CommentFileSizeAuthor
#13 Screenshot from 2024-01-31 11-10-23.png55.77 KBrupeshghar
#9 Before-claro-patch.png268.32 KBShubham Sharma 77
#9 After-claro-patch.png286.79 KBShubham Sharma 77
#9 olivero-issue.png329.77 KBShubham Sharma 77
#9 stark-issue.png265.26 KBShubham Sharma 77
#8 3331350-patch-after.png256.18 KBnayana_mvr
#8 3331350-patch-before.png193.48 KBnayana_mvr
#6 interdiff-3_6.txt907 bytesgauravvvv
#6 3331350-6.patch1000 bytesgauravvvv
#6 interdiff-3_6.txt877 bytesgauravvvv
#6 3238618-6.patch1.24 KBgauravvvv
#4 afterpatch#3.png998.12 KBsonam.chaturvedi
#4 beforepatch#3.png844.76 KBsonam.chaturvedi
#3 3331350-3.patch887 bytesgauravvvv
claro_css_bug_0003.png89.4 KBknibals
claro_css_bug_0002.png40.11 KBknibals
claro_css_bug_0001.png69.56 KBknibals

Issue fork drupal-3331350

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:

Issue fork phone_international-3331350

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

knibals created an issue. See original summary.

knibals’s picture

knibals
Primary language French
Location Dakar
commented
Issue tags: +CSS
gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 3331350-3.patch887 bytes

I can confirm this is happening. I have attached a patch for same, Please review.

sonam.chaturvedi’s picture

sonam.chaturvedi commented
Status: Needs review » Needs work
StatusFileSize
new beforepatch#3.png844.76 KB
new afterpatch#3.png998.12 KB

Verified and tested patch #3 on 10.1.x-dev. Patch applied successfully.

Test Steps:
1. Install and activate the International Phone module;
2. Add an "International phone" field to a content;
3. Go to the "Form display" tab and select some country and exclude others;
4. You should see a (very) long list of excluded countries displayed in the same line, making a horizontal scrollbar appear.
5. Apply patch #3
6. Clear drupal cache
7. Repeat step 3
8. Verify list of excluded countries are wrapped and CSS overflow-wrap: break-word; is added

Test Result: List is not wrapped and patch does not resolves the issue

Before Patch:
before patch 3

After Patch:
after patch 3

sonam.chaturvedi’s picture

sonam.chaturvedi commented
Status: Needs work » Needs review
gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 3238618-6.patch1.24 KB
new interdiff-3_6.txt877 bytes
new 3331350-6.patch1000 bytes
new interdiff-3_6.txt907 bytes

Attached interdiff, Please check.

gauravvvv’s picture

gauravvvv commented
nayana_mvr’s picture

nayana_mvr commented
StatusFileSize
new 3331350-patch-before.png193.48 KB
new 3331350-patch-after.png256.18 KB

Verified the patch #6 and tested it on Drupal version 10.1.x. The patch works fine and I have added the before and after screenshots for reference.

Before patch
Before-patch

After patch
After-patch

Shubham Sharma 77’s picture

Shubham Sharma 77 commented
Component: Claro theme » system.module
Assigned: knibals » Unassigned
StatusFileSize
new stark-issue.png265.26 KB
new olivero-issue.png329.77 KB
new After-claro-patch.png286.79 KB
new Before-claro-patch.png268.32 KB

Applied patch #6 applied successfully in drupal-10.1.x-dev on the Claro theme.
This is not happening only on a particular theme. The issue is the same in all themes
For ref sharing screenshots...

Shubham Sharma 77’s picture

Shubham Sharma 77 commented
Status: Needs review » Needs work

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

rupeshghar’s picture

rupeshghar commented
Assigned: Unassigned » rupeshghar
rupeshghar’s picture

rupeshghar commented
Assigned: rupeshghar » Unassigned
StatusFileSize
new Screenshot from 2024-01-31 11-10-23.png55.77 KB

phone_international module is not supported with 11.x version. phone_international module needs update.

shweta__sharma made their first commit to this issue’s fork.

shweta__sharma opened merge request !6402

shweta__sharma’s picture

shweta__sharma commented
Status: Needs work » Needs review

I have pushed the code kindly review it also @rupeshghar The module is compatible with Drupal 11.x

Thanks

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

So may need a rebase but I've re-ran the nightwatch tests 3 times and they fail each time.

ahsannazir made their first commit to this issue’s fork.

ahsannazir’s picture

ahsannazir commented
Status: Needs work » Needs review

FIxed the Pipeline. Please review

smustgrave’s picture

smustgrave commented
Priority: Normal » Minor
Status: Needs review » Reviewed & tested by the community

Even though this seems triggered by a contrib module that solution seems simple enough

nod_’s picture

nod_
Primary language French
Location Lille
commented
Category: Bug report » Support request
Status: Reviewed & tested by the community » Active

This area is supposed to be a summary, in this case a list of 10+ countries is not a summary it's the whole thing. Here specifically I would only print the number of excluded countries if it's more than, let's say 5.

Breaking on words could have unintended side effects on narrow screens in regular use cases.

Additionally word-break: break-word; is deprecated https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word

This issue should be moved to the relevant contrib module.

nod_’s picture

nod_
Primary language French
Location Lille
commented
Project: Drupal core » International Phone
Version: 11.x-dev » 3.3.1
Component: system.module » Code
nod_’s picture

nod_
Primary language French
Location Lille
commented
Version: 3.3.1 » 3.x-dev
Category: Support request » Bug report
Priority: Minor » Normal
Status: Active » Needs work

saidatom made their first commit to this issue’s fork.

saidatom opened merge request !17

saidatom’s picture

saidatom
Location Lisbon
commented
Status: Needs work » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.