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 about 10 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 about 10 years ago by Calvin B