Search field & button are misaligned on Air Mozilla website

RESOLVED FIXED

Status

Webtools
Air Mozilla
RESOLVED FIXED
a year ago
11 months ago

People

(Reporter: dholbert, Assigned: peterbe)

Tracking

Trunk

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(5 attachments)

(Reporter)

Description

a year ago
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?
(Reporter)

Comment 1

a year ago
Created attachment 8825138 [details]
screenshot of bug (misaligned field/button)
(Reporter)

Comment 2

a year ago
Created attachment 8825139 [details]
screenshot of expected results (e.g. after removing 'display: inline-block' from ._ac-wrap rule)
(Reporter)

Comment 3

a year ago
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?
Depends on: 1141173
Flags: needinfo?(peterbe)
Summary: Search field & button are misaligned on Air Mozilla → Search field & button are misaligned on Air Mozilla website
(Assignee)

Comment 4

11 months ago
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.
Assignee: nobody → peterbe
Flags: needinfo?(peterbe)
(Assignee)

Comment 5

11 months ago
Created attachment 8841608 [details]
Screen Shot 2017-02-27 at 12.08.07 PM.png

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

Comment 6

11 months ago
Created attachment 8841609 [details]
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?
(Assignee)

Comment 7

11 months ago
Because you're much better at CSS than me, I'm kindly posting this as a needinfo for help.
Flags: needinfo?(dholbert)
(Reporter)

Comment 8

11 months ago
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.)
Flags: needinfo?(dholbert)
(Reporter)

Comment 9

11 months ago
>  (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 11

11 months ago
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)

Updated

11 months ago
Status: NEW → RESOLVED
Last Resolved: 11 months ago
Resolution: --- → FIXED
(Assignee)

Comment 12

11 months ago
Seems it solved the problem on https://air-dev.allizom.org/
You need to log in before you can comment on or make changes to this bug.