I’ve decided to make the life of our users a bit easier, especially the part where they have to fill out the links to their social profiles. Until now, if you had two signatures, and wanted to link both to the same profiles, you had to either fill them out twice, or copy paste – not really the most enjoyable process if you have 3-4 different profiles. Remembering the editable combo Windows has, I thought it would nice that if the user had the option of either filling out a new profile link, or choose one of the previously submitted. Unfortunately, it has slipped my mind that HTML doesn’t support these editable combos.

I looked around a bit to see if someone has a nice solution, found a few, but wasn’t really happy with any of them. So here’s my “how to do it in four simple steps”.

1. Put a select tag, and an input tag, one next to the other

<select id="combo1" style="width: 200px;">
	<option>option 1</option>
	<option>option 2</option>
	<option>option 3</option>
</select>
<input id="text1" />

2. Move the input left using a negative CSS margin-left directive, to position it over the select tag

<select id="combo2" style="width: 200px;">
	<option>option 1</option>
	<option>option 2</option>
	<option>option 3</option>
</select>
<input id="text2" style="margin-left: -203px;" />

You can see that the input tag appears over the select tag. And now let’s…

3. Adjust the CSS of the input tag to fit smoothly into the select tag

<select id="combo3" style="width: 200px;">
	<option>option 1</option>
	<option>option 2</option>
	<option>option 3</option>
</select>
<input id="text3" style="margin-left: -203px; width: 180px; height: 1.2em; border: 0;" />

4. Now let’s use JQuery to connect the functionality of both tags

<select id="combo4" style="width: 200px;" onchange="$('input#text4').val($(this).val());">
	<option>option 1</option>
	<option>option 2</option>
	<option>option 3</option>
</select>
<input id="text4" style="margin-left: -203px; width: 180px; height: 1.2em; border: 0;" />

You may notice that the first selection doesn’t work at first. This is because in the underlying select tag the first item is already selected. To overcome this I’ve added an empty item to be selected by default. The downside is that this, not surprisingly, adds an empty line in the combo. If someone figures a nicer way to fix this – I’ll be happy to hear!

That’s it! Works nicely on Chrome and Firefox. Enjoy!

Welcome to bitwise! It’s my brand new blog, it’s the first line of it, and already I’m extremely proud to present it to you! After having stopped programming for a few years to do some more managerial work I got back to it a couple of years ago, and enjoying every minute of it. Oddly enough, it was C++ that I left, and PHP/Javascript that I got back to.

I’m currently leading the development of WiseStamp.com, where I’m working on a client application (a Firefox/Chrome addon) and the server side supporting it.

I love simple and elegant solutions, and will be happy to share with you these simple pleasures, here in this blog. If you like what you read – you’re welcome to let me know, if you think you have better ideas than mine – you’re most definitely encouraged to do so!

I believe I’ll be referencing WiseStamp software quite a bit in my posts, assuming you’re familiar with it. If not – get right to it!