Drop down box format ...

[Gill1978]

Hi!

I've got a drop down box that displays the result of a query. There are 2 columns that are displayed. Is there a way of putting columns in the drop down display - so that they're diplayed better?
The box is quite small, is there a way of having the drop down bigger than the box that is clicked by the user?

Thanks

Julie

The query used is:

<cfquery DATASOURCE=&quot;#application.dsn#&quot; NAME=&quot;riskCodeQuery&quot;>
select RISK_CODE, RISK_CODE_DESC
from lookup_risk_code
</cfquery>

and
the coldfusion to display the result is:

<td><select name=&quot;RiskCode&quot;>
<option value=&quot;&quot; SELECTED>-- Select --</option>
<cfoutput query=&quot;riskCodeQuery&quot;>
<option value=&quot;#RISK_CODE#&quot;>#RISK_CODE# - #RISK_CODE_DESC#
</cfoutput>
</select></td>

 

[CFDude]

Are you wanting to widen the drop down?
You can set a width in the Select name to the exact size.

e.g
<select name=&quot;foo&quot; style=&quot;width:100px&quot;>
etc...

This will set the width of the select list to 100 pixels wide.

Does this answer your question?

 

[Gill1978]

The actual box that the user clicks stays the same, but the dropdown that displays the result of the query should be wider than the box! not sure if coldfusion can do that!

What i'd like is once the user has selected something from the drop down, only the value in the first column is the value of the dropdown box.

 

[CFDude]

Oh, I see now.

Its's really an issue with HTML than Cold Fusion. The dropdown width is normally dictated by the largest width of the option below it. I don't see a way to do this with a style sheet.

What you could do is dynamically change the width of the select box when they click on it (onFocus) and change it back when they go out of it.

e.g
<form name=&quot;form1&quot; method=&quot;get&quot;>
<select name=&quot;foo&quot; style=&quot;width:50px&quot; onFocus=&quot;javascript:document.form1.foo.style.width = '200px';&quot; onblur=&quot;javascript:document.form1.foo.style.width = '50px';&quot;>
<option>Hey this is a test to see what the drop down box will look like when I click on it. You think it will work?
<option>2
</select>
</form>
This will resize the select box to 200 pixels when click on and size it back to 50 when they exit.

HTH,
Tim P.

 

[Gill1978]

I tried it out but it changes the size of the dropdown box before the user has selected.

I dont think i explained it properly below would be the ideal thing for the html/ coldfusion to do ... but it looks as though it can't do it!


1. dropdown box before user clicks
_______
| |
|_______|

2. dropdown box when it's clicked
_______
| |
|____________________
|234 today TD2 |
|456 Monday MN6 |
|____________________|

3. When the user has selected
_______
| |
|234____|


Cheers

Julie

 

[CFDude]

Julie,
Unfortunately, there is not a whole lot you can do with a select -- there are only 3 events available to a select --
OnFocus -- when a user clicks/tabs to the dropdown
OnChange -- this fires when a user selects an option
OnBlur -- when the focus goes away from the select box.

My code will expand it when the user click into the box and shrink it when the user leaves the box.

If you change the OnBlur to OnChange, it will resize back down immediately upon selection.

This is all a javascript function and Cold Fusion really doesn't have anything to do with it. You might try the Javascript forum -- they might have a better answer than me.

HTH,
Tim P.