I used to have a combobox, but our client asked for auto-complete functionality ("like in VB").

So I changed the combobox into a textbox (I added auto-complete functionality using the jQuery Autocomplete plugin), and I'd like it to add something like the "down arrow" in a combobox.

How can it be done best?

I tried doing:

<input type="text" /><img style="width:20px; height:20px; vertical-align:middle" />

but the <img> aligned differently across browsers..

I also tried playing with negative margins:

<input type="text" /><img style="width:20px; height:20px; vertical-align:middle;margin-top:-1px;margin-left:-3px;" />

but the alignment still sucked in one browser or the other.

2 answers

Alex Holt 341

Could you post a link to the page on a server somewhere? so we can have a look at the problem in the browser? It's probably possible to solve with CSS, however it's hard to say without seeing the page...

Answered over 9 years ago by Alex Holt

I agree with Jens Hedqvist. I would try absolute positioning because IE, FF, and Safari handle verticle-align "differently". Make sure the container the button is in, is position: relative; and the element itself is position: absolute; so that the element is position absolute within the container it is in; not positioned absolute across the entire page.

The issue you are having with the margins might be you need to use display: block; on the element and then apply the margin changes.

Like Alex said, an example of your page would help a lot so that we are not just guessing as to what the issue might be.

Good Luck!

Answered over 9 years ago by Calvin B