• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1700
  • Last Modified:

Setting the maximum width for a Select box

Hi,

I have a Select box that is populated from a database. Some of the entries are 15 characters wide and some are 50. I'd like to be able to set a maximum width for the box of say 20 characters and just cut off (or better yet have a scroll bar like with a Textarea tag).

Here's a sample of the code.

<td>
<div align="right"></div>
     search by employer:
     <form name="form3" method="get" action="results.cfm">
     <select name="mnuEmployer">
     <cfloop query="rsEmp">
          <option value="<cfoutput>#rsEmp.Employer#</cfoutput>" ><cfoutput>#rsEmp.Employer#</cfoutput></option>
     </cfloop>
     </select>
     <input type="submit" value="Submit" name="empbut">
     </form>
</td>
</tr>

Thanks for the help,

Jon
0
jonleehacker
Asked:
jonleehacker
1 Solution
 
ahoffmannCommented:
<SELECT STYLE="width:20em;">
  <OPTION STYLE="overflow:scroll">scrollbar in OPTION</OPTION>
</SELECT>

# STYLE="overflow:scroll works for Mozilla 0.9.x and Netscape 6.x, take care with Netscape 7.x and Mozilla 1.x
0
 
lexxwernCommented:
more about css at http://www.blooberry.com/
0
 
DreamMasterCommented:
The best you can do for older versions is this:

<select width="50" style="width:50px">
  <option style="overflow:scroll">Scrollbar in option</option>
</select>

The "width=50" part works for netscape as long as the width of the select is shorter. When it gets longer, Netscape looses it, it just wont make it smaller (and I am talking versions 4)

So far, this is the best I have ever been able to do for the looks of select boxes in the different browsers, and don't even mention the browsers on a Macintosh, these have even different sizes for form fields.

I hope this helps a little however.

Max.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now