1329729 - Search field & button are misaligned on Air Mozilla website

Status: RESOLVED FIXED

(Webtools Graveyard :: Air Mozilla, defect)

Description

[Daniel Holbert [:dholbert]]

STR:
 1. Visit https://air.mozilla.org/
 2. Look at the search box & button at the upper right of the page.

ACTUAL RESULTS:
The button is positioned a few pixels higher than the text box.

EXPECTED RESULTS:
The button and text box should be aligned.

Notes:
* This doesn't seem to be a browser bug -- it happens in both Firefox and Chrome.
* It seems like the alignment is improved if I remove the "display: inline-block" decl from the ._ac-wrap CSS rule. Maybe that's the correct fix?

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot of bug (misaligned field/button)

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot of expected results (e.g. after removing 'display: inline-block' from ._ac-wrap rule)

Comment 3

[Daniel Holbert [:dholbert]]

Looks like this field is part of "autocompeter", which we integrated in bug 1141173.  The possibly-wanting-removing 'inline-block' rule is the first line here:
https://github.com/mozilla/airmozilla/blame/a2fda3183d6602843a66f963529ef502f1353c64/airmozilla/main/static/main/autocompeter/autocompeter.min.css
(Can we tweak/override that CSS, or is that problematic since it comes from upstream?)

Peter, perhaps you could take a look or suggest someone who could?

Comment 4

[Peter Bengtsson [:peterbe]]

I'd love to resolve this. Also, I'd love to have some help. 

The file autocompeter.min.css is copied from https://github.com/peterbe/autocompeter/tree/master/public/dist (note the name "dist") and put into airmozilla's code. We can change that. Or override things using https://github.com/mozilla/airmozilla/blob/master/airmozilla/main/static/main/css/autocompeter.css#L1-L2

See attached screenshot of what happens when I remove the `display:inline-block` on the `span._ac-wrap` element.

Comment 5

[Peter Bengtsson [:peterbe]]

Attachment: Screen Shot 2017-02-27 at 12.08.07 PM.png

Alignment fixed when the `display:inline-block` is removed. 
But...

Comment 6

[Peter Bengtsson [:peterbe]]

Attachment: Screen Shot 2017-02-27 at 12.10.27 PM.png

The input element `input._ac-hint` is in a layer underneath `input._ac-foreground` but it's about ~5px lower down.

The idea is that `<input class="_ac-hint">` and `<input class="_ac-foreground">` appear exactly on top of each other. 

Do you have any idea what needs to be done (after/with removing the `display:inline-block`) to make this work?

Comment 7

[Peter Bengtsson [:peterbe]]

Because you're much better at CSS than me, I'm kindly posting this as a needinfo for help.

Comment 8

[Daniel Holbert [:dholbert]]

We just need to keep its absolute positioning to be with-respect-to the containing-block of the "real" <input> textbox, in order for it to overlay (underlay?) correctly.

That means we need to:
  (a) drop the 'position:relative' from .ac_wrap (since that's no longer the containing block)
  (b) add 'position:relative' to its <form> parent (which is the containing block for the <input>
 ...and then you can make the original fix that I suggested:
  (c) remove "display:inline-block" from .ac_wrap
 ...without breaking this. (I think.)

Comment 9

[Daniel Holbert [:dholbert]]

>  (b) add 'position:relative' to its <form> parent (which is the containing block for the <input>

s/which is/which is becoming/

(It'll become the containing block for the input after you drop the "display:inline-block" from .ac_wrap, I mean.)

Comment 10

[Peter Bengtsson [:peterbe]]

Attachment: Link to Github pull-request: https://github.com/mozilla/airmozilla/pull/816

Comment 11

[[github robot]]

Commit pushed to master at https://github.com/mozilla/airmozilla

https://github.com/mozilla/airmozilla/commit/e5a1eab77ea8915f00d392f86bdb6025f3c53880
fixes bug 1329729 - Search field & button are misaligned on Air Mozilla website (#816)

Comment 12

[Peter Bengtsson [:peterbe]]

Seems it solved the problem on https://air-dev.allizom.org/