Opened on 12/08/2017 at 12:52:45 PM

Closed on 12/20/2017 at 03:13:38 PM

Last modified on 03/27/2018 at 12:52:28 PM

#6177 closed defect (fixed)

[ABP UI] Options Page - Overlapping of "Settings" translations

Reported by: Shikitita Assignee: saroyanm
Priority: P2 Milestone:
Module: User-Interface Keywords:
Cc: saroyanm, greiner, jeen, Ross Blocked By:
Blocking: Platform: Unknown / Cross platform
Ready: yes Confidential: no
Tester: Ross Verified working: yes
Review URL(s):

Description (last modified by saroyanm)


Test environment:

How to reproduce

  1. Access the test environment
  2. In the URL, change the locale at the end for "uk"

Observed behaviour

The Ukrainian translation for "Settings" (Налаштування) overlaps with the right side of the UI as can be seen in the attached file.

Expected behaviour

The text should be displayed in the side bar on the left without overlapping.

Please note that the same issue happens with the locale "az".

Note for testers

  • Check if this is still a case for other translations

Attachments (1)

Overlapping.JPG (96.9 KB) - added by Shikitita on 12/08/2017 at 12:53:23 PM.
Overlapping in Ukrainian

Download all attachments as: .zip

Change History (14)

Changed on 12/08/2017 at 12:53:23 PM by Shikitita

Overlapping in Ukrainian

comment:1 Changed on 12/08/2017 at 12:54:37 PM by Shikitita

  • Description modified (diff)

comment:2 Changed on 12/19/2017 at 03:20:06 PM by saroyanm

  • Priority changed from Unknown to P2
  • Ready set

comment:3 Changed on 12/19/2017 at 03:28:03 PM by saroyanm

  • Cc jeen added

I can see couple of options to fix this issue, each of them has it's pros and cons:

  1. Using the overflow-wrap: break-word; which will break the work into couple of lines, but it's not supported in Edge (so we might want to find alternative until shipping to edge, though can be good stopgap solution).
  2. cropping the long words and showing ... in the end.
  3. Decreasing the font-size in general and/or increasing the width of the sidebar.
  4. Finding shorter translations if possible.

I'll implement Num 1 solution as a stopgap, until @Shikitita and @Jeen will be in favor of another solution.
@Jeen, @Shikitita let me know which solution you prefer, or let me know if you have another suggestion (I'll discourage changing font size of particular language, because maintaining that might become a pain).

comment:4 Changed on 12/19/2017 at 03:52:49 PM by Shikitita

I am more in favour of increasing the width of the sidebar, if possible, as in most normal screens it seems it'd still be properly displayed and at least the text would be readable.

comment:5 Changed on 12/19/2017 at 04:05:05 PM by jeen

I think we can decrease the font size to 1.8em and increase the width of the sidebar to accommodate for the longest text length.

Last edited on 12/19/2017 at 04:05:19 PM by jeen

comment:6 Changed on 12/20/2017 at 01:42:21 PM by saroyanm

  • Owner set to saroyanm

comment:7 Changed on 12/20/2017 at 01:52:48 PM by saroyanm

  • Review URL(s) modified (diff)
  • Status changed from new to reviewing

comment:8 Changed on 12/20/2017 at 02:33:17 PM by saroyanm

  • Cc Ross added

@Ross adding you as it might require your attention in future when we will prepare for the release.

comment:9 Changed on 12/20/2017 at 03:11:46 PM by saroyanm

  • Description modified (diff)

Added note for test just in case, but uk text was the longest so far.

comment:10 Changed on 12/20/2017 at 03:12:52 PM by abpbot

A commit referencing this issue has landed:
Issue 6177 - Fixed overlaping header text in the sidebar

comment:11 Changed on 12/20/2017 at 03:13:38 PM by saroyanm

  • Resolution set to fixed
  • Status changed from reviewing to closed

comment:12 Changed on 01/10/2018 at 03:38:55 PM by greiner

I've created a spec ticket to find a more long-term solution for this issue to avoid running into maintainbility issues later on:

comment:13 Changed on 03/27/2018 at 12:52:28 PM by Ross

  • Tester changed from Unknown to Ross
  • Verified working set


Firefox 51 / 58 / Windows 10
Chrome 49 / 65 / Windows 7
Opera 36 / 51 / Windows 7

Add Comment

Modify Ticket

Change Properties
as closed .
The resolution will be deleted. Next status will be 'reopened'.
to The owner will be changed from saroyanm.
Note: See TracTickets for help on using tickets.