Adding icons to your drop down lists

[Mike Grigsby]

This is probably obvious to real programmers, but I was doing a little reading on CSS last weekend and realized that some browsers allow images in drop down lists (not IE , of course, but Firefox does). On IE , the list shows up as a normal text without icons.

So, using inline CSS, I made a couple of tweaks to my app:

1. Make some icons about 15x15 pixels (Haven't tested with a higher pixel size, but I think it would get cut off because it's really a background image).

2. Create a local variable to hold the image path (I used a STRING L:IconStyle)

3. In the Validate Drop Field Record embed of the field containing the drop down list, add the following code:

L:IconStyle='" style="background: url(' & CLIP(ICO:IconPath) & ') left no-repeat;'

4. On your field that you've specified "Drop" as the type, use the local variable: L:IconStyle in the CSS class.

5. Because I told the CSS to left justify the image and not repeat it, I have to jog the drop list text to the right a bit, so I use a minor tweak in the Description field by adding some  's:

'      ' & ICO:IconName

That's all there was to it! MikeG

[attachment deleted by admin]