[MGNLUI-6688] Long labels are not split and dialogs look messy Created: 05/May/21  Updated: 04/Aug/23  Resolved: 23/May/23

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: 6.2.8
Fix Version/s: 6.3.0, 6.2.35

Type: Bug Priority: Neutral
Reporter: Jonathan Ayala Assignee: Quach Hao Thien
Resolution: Fixed Votes: 0
Labels: dialogs, ux-improvement, ux-improvement-selected
Σ Remaining Estimate: Not Specified Remaining Estimate: Not Specified
Σ Time Spent: 1d 5h Time Spent: 1d 5h
Σ Original Estimate: Not Specified Original Estimate: Not Specified

Attachments: PNG File Screenshot 2021-04-21 at 15.41.51.png     PNG File image-2023-04-28-10-02-37-387.png     PNG File image-2023-04-28-10-04-52-964.png    
Issue Links:
causality
Sub-Tasks:
Key
Summary
Type
Status
Assignee
MGNLUI-8062 Implementation Sub-task Completed Quach Hao Thien  
MGNLUI-8063 Review Sub-task Completed Adam Siska  
MGNLUI-8064 QA Sub-task Completed Jaromir Sarf  
MGNLUI-8065 PreintQA Sub-task Completed Adam Siska  
Template:
Acceptance criteria:
Empty
Task DoD:
[X]* Doc/release notes changes? Comment present?
[X]* Downstream builds green?
[X]* Solution information and context easily available?
[X]* Tests
[X]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Release notes required:
Yes
Documentation update required:
Yes
Date of First Response:
Epic Link: Dialogs
Sprint: Nucleus 36
Story Points: 2
Team: Nucleus
Work Started:
Approved:
Yes

 Description   

Steps to reproduce

  1.  Modify one existing component to add a very long field label like: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"
  2.  Open the component dialog

Expected results

Long label is split and shown in different lines so the dialogs looks correctly

Actual results

The label is shown in one line and the dialog looks messy

 

Workaround

In some cases, shortening labels is an option; unfortunately, it is not.

 

Solution 

  • The label should be short, and we limit characters to 25 
    • Add ... when text goes above this number of characters
  • When the text to be applied is long - use the tooltip instead  


 Comments   
Comment by Adam Siska [ 28/Apr/23 ]

Discovery:

M5.7 has ellipsis for long labels and alt text after hovering the field (in both dialog and detail view)

Both ellipsis and hover tooltip could be done by CSS with:

overflow: hidden
text-overflow: ellipsis

https://stackoverflow.com/a/52930448

Comment by Quach Hao Thien [ 28/Apr/23 ]

Maybe we should investigate more about the context to answer:

  1. Why would the user need a long label for the field? 
  2. Would they rather ellipse the label (using a tooltip to show the whole label) or make the label display in full text (ofc with some adjusting to make it look better)?
Comment by Roman Kovařík [ 22/May/23 ]

Solution:

  • Both vaadin8 and vaadin7 apps now use ellipsis for long field labels.
  • vaadin8 framework shows full label on hover
Comment by Marvin Boie [ 03/Aug/23 ]

Hello,

I just noticed that the label tooltip is no longer displayed on hover after a tab change when a tabbed layout is used. 

Noticed in 6.2.37 with Browser Vivaldi 6.1.3035.204 / Chrome 114.0.5735.245 and Firefox Developer 117.0b2

You can see it on the demo author https://demo.magnolia-cms.com/.magnolia/admincentral#app:pages-app:detail;/travel:edit 

  1. Open Page Properties
  2. Hover over a label --> see tooltip
  3. Change Tab
  4. Hover again over a label --> no tooltip while the dialog is open, even after changing back to the first tab (also on labels that are too long)
Comment by Quach Hao Thien [ 04/Aug/23 ]

Hi mboie,

Thank you for your report, I've filed a new ticket to tackle this issue: https://jira.magnolia-cms.com/browse/MGNLUI-8251

Sorry for any inconvenience!

Generated at Mon Feb 12 09:39:01 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.