Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#12153 closed defect (bug) (fixed)

Usability issue in Opera: tag suggestion popup covers Add button

Reported by: htoomik Owned by:
Milestone: 3.0 Priority: normal
Severity: normal Version: 2.9.1
Component: UI Keywords: has-patch
Focuses: Cc:


Steps to reproduce:
I am entering tags for a post, in the Edit post page, in the Add tags box.
I have typed a tag.
I pause for a moment.
A popup appears suggesting the tag I have just typed.

Ideal behaviour: the popup doesn't hide the Add button.
Actual behaviour: the popup hides the Add button.

In the worst case, the popup appears just as I am about to click Add. Combine this with Ticket 12152 and the result is that instead of adding all the tags I have typed, I lose all I've typed.

I have tested in Firefox and in Opera (Opera for Mac v.10.10). It only appears to be a problem in Opera.

Attachments (3)

Picture 1.png (11.8 KB) - added by htoomik 6 years ago.
12153.diff (1.7 KB) - added by nacin 6 years ago.
Needs some Press This testing. Briefly tested in Chrome, IE6, Firefox, Opera.
12153.patch (2.3 KB) - added by ocean90 6 years ago.
added a <p> tag

Download all attachments as: .zip

Change History (10)

6 years ago


#1 @dd32
6 years ago

  • Component changed from General to UI
  • Milestone changed from Unassigned to 3.0
  • Type changed from enhancement to defect (bug)

The issue here is that div.taghint prevents the Add button from being placed beside the input, and instead, it ends up on the 2nd line where the tag suggestion is placed.

I've tried setting a max-width on the div the same width as the text box, however that hasnt helped, the input still refuses to sit in that location.

#2 @nacin
6 years ago

The issue is that div.taghint is using visibility:hidden, in which the element still takes up space, while display:none would prevent it from taking up any space.

That will need testing across all browsers just to ensure other tweaks aren't necessary. But it fixed it for me in Opera.

6 years ago

Needs some Press This testing. Briefly tested in Chrome, IE6, Firefox, Opera.

#3 @nacin
6 years ago

  • Keywords has-patch needs-testing added

#4 @dd32
6 years ago

  • Keywords needs-patch added; has-patch needs-testing removed

The Taghint text is supposed to be visible, Unless you have the focus on the text box.

Not displaying it obviously fixes the layout problem, but thats not exactly ideal.

On top of that, It takes up space once again as soon as the field loses focus, which ends up meaning that the button jumps to the next line again.

#5 @nacin
6 years ago

Clearly not my best work. I took only a very cursory view of it at first.

I've looked at it again. Because of the use of visibility, the div takes up space. Best I can tell of why this is happening is that because of the negative margins, most browsers don't respect that as a block-level element it still deserves that space. Opera kind of does and the Add button loses out.

Setting a width (170px) and floating it left appears to work for Safari, Chrome, Firefox, and Opera, and fails on IE 6. Still looking into it but we might just be able to serve IE width: auto; float: none to keep it from getting the patch.

6 years ago

added a <p> tag

#6 @ocean90
6 years ago

  • Keywords has-patch added; needs-patch removed

I added a simple <p> tag with some js and css tweaks. Works in Opera, FF, Chrome, Safari, IE8 and IE6.

#7 @dd32
6 years ago

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

(In [14390]) Fix alignment/location of "Add" on non-hierarchical taxonomy addition boxes. Props ocean90. Fixes #12153

Note: See TracTickets for help on using tickets.