Word wrapping is broken for (very) long text, and horizontal scrollbar appear

Created on 5 January 2023, over 1 year ago
Updated 29 May 2024, 18 days ago

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;

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

Proposed resolution

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

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

๐Ÿ› Bug report
Status

Fixed

Version

3.0

Component
Systemย  โ†’

Last updated 1 day ago

No maintainer
Created by

๐Ÿ‡ธ๐Ÿ‡ณSenegal knibals Dakar

Live updates comments and jobs are added and updated live.
  • CSS

    It involves the content or handling of Cascading Style Sheets.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.69.0 2024