Search field & button are misaligned on Air Mozilla website



Air Mozilla
a year ago
11 months ago


(Reporter: dholbert, Assigned: peterbe)



Firefox Tracking Flags

(Not tracked)



(5 attachments)



a year ago
 1. Visit
 2. Look at the search box & button at the upper right of the page.

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

The button and text box should be aligned.

* 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

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

Comment 2

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

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

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 (note the name "dist") and put into airmozilla's code. We can change that. Or override things using

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)

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. 

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?

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)

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)

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
fixes bug 1329729 - Search field & button are misaligned on Air Mozilla website (#816)


11 months ago
Last Resolved: 11 months ago
Resolution: --- → FIXED

Comment 12

11 months ago
Seems it solved the problem on
You need to log in before you can comment on or make changes to this bug.