WordPress.org

Make WordPress Core

Opened 8 years ago

Closed 5 years ago

#18946 closed defect (bug) (fixed)

Too long tags make the cross not moving anymore.

Reported by: jonezjea Owned by: azaozz
Milestone: 4.2 Priority: low
Severity: normal Version: 3.2.1
Component: Editor Keywords: has-patch
Focuses: ui, administration Cc:
PR Number:

Description

If you have a long tag like a long title of a book or movie title or game title and you more the cross doesn't move with the tags.

Look to the screenshot for more info

Attachments (5)

Screenshot (2011-10-14 at 03.11.45).png (10.7 KB) - added by jonezjea 8 years ago.
18946.diff (551 bytes) - added by trishasalas 5 years ago.
Screen Shot 2014-10-26 at 6.03.10 PM.png (21.3 KB) - added by trishasalas 5 years ago.
Screenshot after patch applied
Schermafbeelding 2014-11-05 om 15.18.42.png (15.4 KB) - added by carolinegeven 5 years ago.
Tags - long words get cut off
18946.patch (407 bytes) - added by iseulde 5 years ago.

Download all attachments as: .zip

Change History (23)

#1 @solarissmoke
8 years ago

  • Keywords reporter-feedback added

What platform are you using? Looks fine to me on FF7 on Linux or Windows.

#2 @jonezjea
8 years ago

I use Google Chrome 16.0.912.0 Beta and Windows 7 SP1 pro

#3 @SergeyBiryukov
8 years ago

  • Keywords reporter-feedback removed

Happens in Firefox 7 too. Steps to reproduce:

  1. Add a few short tags (as on the screenshot).
  2. Add a long tag (e.g. "The Legend of Zelda: Oracle of Seasons and Oracle of Ages").
  3. Scroll a bit to the right. All tags will move, but the icons will stay in place.

#4 @jonezjea
8 years ago

Just updated my version of Google Chrome to .4 at the end and the problem is still here.
Tested it also in FireFox 8.0 Beta 4 and same problem

#5 @chriscct7
5 years ago

  • Focuses ui administration added
  • Keywords needs-patch added
  • Severity changed from minor to normal

This still happens on 4.0 (you have to do the short tags before the long one or you won't be able to reproduce).

Example:
Before scrolling:
http://screencloud.net/v/Ei7Q

After scrolling:
http://screencloud.net/v/z7q7

This ticket was mentioned in Slack in #core by chriscct7. View the logs.


5 years ago

#7 @trishasalas
5 years ago

Here's a patch. I'm not sure I named the patch correctly, let me know if not. This was just a couple of css changes. I changed overflow: auto to overflow: hidden and removed white-space: nowrap; from .tagchecklist span

Last edited 5 years ago by trishasalas (previous) (diff)

@trishasalas
5 years ago

@trishasalas
5 years ago

Screenshot after patch applied

#8 @chriscct7
5 years ago

  • Keywords has-patch added; needs-patch removed

Looks good to me

#9 @carolinegeven
5 years ago

The patch works and looks good to me.

The only thing is that words longer than 35 characters are not displayed properly. Characters at the end of the word get cut off. I'm not sure if this is behavior that should be addressed or fixed.

@carolinegeven
5 years ago

Tags - long words get cut off

#10 follow-up: @chriscct7
5 years ago

The odds of someone wanting to use a word that's longer than 35 characters is considerably low. There are only a handful of languages with words that are even that long*, and most of those words are not what you would call commonly used words.

This might be a case that we just want to use design for the vast majority for.

*ref: http://en.wikipedia.org/wiki/Longest_words

#11 in reply to: ↑ 10 ; follow-up: @carolinegeven
5 years ago

Replying to chriscct7:

The odds of someone wanting to use a word that's longer than 35 characters is considerably low. There are only a handful of languages with words that are even that long*, and most of those words are not what you would call commonly used words.

This might be a case that we just want to use design for the vast majority for.

*ref: http://en.wikipedia.org/wiki/Longest_words

This was my thought exactly, but I still wanted to address this to verify.

Then the patch looks good to me :)

#12 in reply to: ↑ 11 @chriscct7
5 years ago

Replying to carolinegeven:
Agreed. I'll bring it up in dev chat today to merge into core

Replying to chriscct7:

The odds of someone wanting to use a word that's longer than 35 characters is considerably low. There are only a handful of languages with words that are even that long*, and most of those words are not what you would call commonly used words.

This might be a case that we just want to use design for the vast majority for.

*ref: http://en.wikipedia.org/wiki/Longest_words

This was my thought exactly, but I still wanted to address this to verify.

Then the patch looks good to me :)

#13 @melchoyce
5 years ago

The only thing is that words longer than 35 characters are not displayed properly. Characters at the end of the word get cut off. I'm not sure if this is behavior that should be addressed or fixed.

It's probably worth adding text-overflow: ellipsis; for longer words, just in case.

@iseulde
5 years ago

#14 @iseulde
5 years ago

  • Priority changed from normal to low

I cannot reproduce the original issue.
Removing white-space: nowrap; will make sure longer sentences are wrapped.
Adding max-width: 100%;overflow: hidden;text-overflow: ellipsis; will make sure long words without spaces are cut of wil an ellipsis.

Tags are supposed to be short though. Currently the end of the tag is just cut off...

Updated @trishasalas' patch.

#15 @trishasalas
5 years ago

Avryl, Thanks for doing this! I was playing with this some last night and was unable to get ellipses to work. Looks like I was should have used max-width rather than width.

When not using ellipses long phrases were wrapped, long words were just cut off.

#16 @iseulde
5 years ago

  • Milestone changed from Awaiting Review to 4.2

This ticket was mentioned in Slack in #core by trishasalas. View the logs.


5 years ago

#18 @azaozz
5 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In 31332:

Fix displaying long tag names in the Tags postbox. Props trishasalas, carolinegeven, iseulde. Fixes #18946.

Note: See TracTickets for help on using tickets.