Solved

Setting the maximum width for a Select box

Posted on 2002-07-27
3
1,687 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

930 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

10 Experts available now in Live!

Get 1:1 Help Now