WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 5 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:

Description

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.
screenshot
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 5 years ago.
added a <p> tag

Download all attachments as: .zip

Change History (10)

@htoomik6 years ago

screenshot

comment:1 @dd326 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.

comment:2 @nacin6 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.

@nacin6 years ago

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

comment:3 @nacin6 years ago

  • Keywords has-patch needs-testing added

comment:4 @dd326 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.

comment:5 @nacin6 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.

@ocean905 years ago

added a <p> tag

comment:6 @ocean905 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.

comment:7 @dd325 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.