Expand Select Boxes

[soho34]

Hi,

Is there any way to manipulate the size (row height, column width) of a select box.

I populate my select box, but don't want the size of the box to be dependent on the data returned.

Here's my select statement:

<select name="services" multiple size="allservices.recordcount">
			        <cfloop query="allservices">
			        	<cfif Find("#description#",vendservice_list)>
							<option value="#servicetypesid#" selected>#description#</option>
						<cfelse>
							<option value="#servicetypesid#">#description#</option>
						</cfif>
			        </cfloop>
		</select>

Thank you in advance.

soho34

 

[Vragabond]

There is no reliable method for the width. I know IE will adhere to width: 100px; for instance, but I don't think others will. You might try adding overflow: hidden, but then you risk your users won't be able to see the selections. Usually, it is best to put a longer than all option at the top. For manipulating row size, manipulate the font-size and type:

<select style="width: 100px; font: normal 8px/8px Arial, sans-serif;">
  <option>------- Please select --------</option>
  <option value="x">Option 1</option>
</select>

 

[cLFlaVA]

I've never had a problem with setting an explicit width using CSS (cross-browser), but I dare not disagree with Vrag.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Vragabond]

I admit I was lazy to test and I did remember a conversation about this from aeons ago where we concluded that having long first option is the most reliable way to determine select box width. However, I tested it now and here are the findings.

1. If box width exceedes the length of all options, select box will be rendered ok in all the browsers (IE6, Opera7+ and Mozilla/FF). If that is what you need, go for it.

2. If the specified width will restrict the lenght of the options (select box would be wider if no width was specified) the box is again rendered as described in css -- that is, maintains the specified width. However the text will be cut and there is no way (apart from looking at the source) to see what the option says. If <select> is used with size="1" (i.e. the regular dropdown box) Mozilla will expand the options list to accomodate for the text, while Opera and IE won't.

Now I guess all you need to do is decide for yourself if your problem can handle specific width solution.

 

[soho34]

Thanks Vragabond. Like cLFlaVA, I didn't disagree and it paid off. Worked like a charm. Thanks again.

soho34