Styling and RTL style fixes for user/site autocomplete

[ocean90]

Related: #19810

[nacin]

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

[helenyhou]

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.

[nacin]

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.

[helenyhou]

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):

Otherwise, 20584.styling.diff​

Edit: note that neither of my patches includes the RTL fixes from ocean90.

[ryan]

In [20705]:

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

[dgwyer]

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.

[dgwyer]

Comparison of top border designs

[SergeyBiryukov]

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

[dgwyer]

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.

[nacin]

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.

[helenyhou]

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):

[helenyhou]

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.

[dgwyer]

Looks great!

[nacin]

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

[helenyhou]

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.

[nacin]

Suggest commit on 20584.3.diff​.

[ryan]

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