Solved

Setting the maximum width for a Select box

Posted on 2002-07-27
3
1,686 Views
Last Modified: 2008-03-10
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
Comment
Question by:jonleehacker
3 Comments
 
LVL 51

Accepted Solution

by:
ahoffmann earned 50 total points
ID: 7181846
<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
 
LVL 12

Expert Comment

by:lexxwern
ID: 7183122
more about css at http://www.blooberry.com/
0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 7183946
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Jquery oncheck to update SPAN 31 55
Image not there 4 33
FTP File permissions 1 28
Library to convert HTML to PDF. 8 44
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now