WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 23 months ago

#20584 closed defect (bug) (fixed)

Styling and RTL style fixes for user/site autocomplete

Reported by: ocean90 Owned by: ryan
Milestone: 3.4 Priority: normal
Severity: normal Version: 3.4
Component: RTL Keywords: has-patch commit
Focuses: Cc:

Description

Related: #19810

Attachments (9)

20584.patch (671 bytes) - added by ocean90 2 years ago.
wp-autocomplete.png (19.7 KB) - added by helenyhou 2 years ago.
20584.styling.diff (2.5 KB) - added by helenyhou 2 years ago.
wp-autocomplete-2.png (16.6 KB) - added by helenyhou 2 years ago.
20584.styling2.diff (4.3 KB) - added by helenyhou 2 years ago.
autocomplete-width.png (35.8 KB) - added by dgwyer 23 months ago.
Comparison of top border designs
autocomplete-long.png (24.5 KB) - added by helenyhou 23 months ago.
20584.2.diff (3.8 KB) - added by helenyhou 23 months ago.
20584.3.diff (4.6 KB) - added by helenyhou 23 months ago.

Download all attachments as: .zip

Change History (29)

ocean902 years ago

comment:1 follow-up: nacin2 years ago

Maybe in the process we could make it look slightly better overall?

helenyhou2 years ago

comment:2 in reply to: ↑ 1 helenyhou2 years ago

Replying to nacin:

Maybe in the process we could make it look slightly better overall?

Perhaps something like this? Can upload the patch to this ticket and repurpose it or make another one for general styling.

http://core.trac.wordpress.org/raw-attachment/ticket/20584/wp-autocomplete.png

comment:3 follow-up: nacin2 years ago

Looks great. Perhaps chop off the rounded corners on the top so it integrates nicely into the input. Or maybe not. I don't care. Looks way better than we have now.

helenyhou2 years ago

comment:4 helenyhou2 years ago

  • Summary changed from RTL style fixes for user/site autocomplete to Styling and RTL style fixes for user/site autocomplete

helenyhou2 years ago

helenyhou2 years ago

comment:5 in reply to: ↑ 3 helenyhou2 years ago

Replying to nacin:

Perhaps chop off the rounded corners on the top so it integrates nicely into the input.

20584.styling2.diff accomplishes this (also changes the input focus border color for blue in general - there wasn't one at all before):

http://core.trac.wordpress.org/raw-attachment/ticket/20584/wp-autocomplete-2.png

Otherwise, 20584.styling.diff

Version 0, edited 2 years ago by helenyhou (next)

comment:6 ocean902 years ago

  • Keywords commit added

comment:7 ryan2 years ago

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

In [20705]:

Styling and RTL style fixes for user/site autocomplete. Props ocean90, helenyhou. fixes #20584

comment:8 dgwyer23 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

I have been experimenting with the autocomplete jQuery widget included in the core to pull in post titles. Because the length of any post can be longer than expected this results in the autocomplete box being longer than the input box and causes an issue with the top border (see attached screenshot).

In circumstances like this the original design where the top border retains the rounded corners works best. If you could always guarantee that they would both match then the revised design would be preferable.

For unexpectedly long autocomplete results the matching input box would have to be very long too which wouldn't look great. Trying to go to extra lengths to match both widths wouldn't be worth it anyway?

P.S. Apologies for reopening ticket. Not sure whether I should reopen or start a new ticket.

dgwyer23 months ago

Comparison of top border designs

comment:9 SergeyBiryukov23 months ago

  • Keywords commit removed

comment:10 SergeyBiryukov23 months ago

The ability to use the autocomplete widget for post titles sounds like a separate enhancement. I'd suggest creating a new ticket.

comment:11 dgwyer23 months ago

I'm not requesting an enhancement to support post titles as such. That was just an example to illustrate the point that the autocomplete results can potentially extend beyond the input box width (as per my screenshot).

To safeguard against this it may be better to use Helen's original CSS with the top rounded corners.

comment:12 SergeyBiryukov23 months ago

  • Keywords ui-feedback added

comment:13 nacin23 months ago

I think the bottom two in https://core.trac.wordpress.org/attachment/ticket/20584/autocomplete-width.png look fine. Not great, but better than the top two.

The top two would look better if there was a pixel between the input and the autocomplete. I don't care either way. I think this is probably good enough for 3.4.

helenyhou23 months ago

comment:14 helenyhou23 months ago

  • Keywords ui-feedback removed

20584.2.diff does two things:

  • Lengthens the inputs in the Right Now network dashboard widget
  • Does some JS magic so we can have a border around the whole autocomplete widget/list

Looks like this when an item is longer (shorter items still look the same as before):

http://core.trac.wordpress.org/raw-attachment/ticket/20584/autocomplete-long.png

comment:15 helenyhou23 months ago

Actually, it does a third thing: removes some CSS color cruft from the main stylesheet and de-dupes the JS closures for open/close callbacks.

comment:16 dgwyer23 months ago

Looks great!

comment:17 follow-up: nacin23 months ago

Good here. Can .ui-autocomplete not be assigned margin-top: -1px in the CSS?

comment:18 in reply to: ↑ 17 helenyhou23 months ago

Replying to nacin:

Can .ui-autocomplete not be assigned margin-top: -1px in the CSS?

No, it gets absolutely positioned and is wrong the first time it appears. Have a better solution, actually, and am looking at how it actually displays in RTL, so will re-patch soon.

helenyhou23 months ago

comment:19 nacin23 months ago

  • Keywords commit added

Suggest commit on 20584.3.diff.

comment:20 ryan23 months ago

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

In [20984]:

Site/user autocomplete fixes.

  • Lengthen the inputs in the Right Now network dashboard widget
  • Border around the whole autocomplete widget/list
  • Handle long strings
  • Remove some CSS color cruft from the main stylesheet and de-dupe the JS closures for open/close callbacks.

Props helenyhou
fixes #20584

Note: See TracTickets for help on using tickets.