Columnized Select Box 1

southbeach · Jan 25, 2008

I am working on a page where a list of products are shown. I would like to show two columns Product ID + Product Description.

The problem:
Since text string within each column is not same length, the select box content scrambles making it hard to read.

What I am looking for:
I would like to have the select box to maintain a static length on each column

+----------------------------------------------+
| 190001 - 110CC Dirt Bick |
| ABC - Alphabet Letters |
| HTML DOC - The world greatest HTML Book |
+----------------------------------------------+

Since I am producing the select box dynamically (using PHP) I have tried:
(1) Using images with dynamic width
(2) Inserting & nbsp; to push columns X number of pixels
(3) Using <pre> tag

Using (2) came closer but not exact. I guess this is because the pixel per letter is not always same thus nearly impossible match column's width.

Your suggestion will be truly appreciated!

Thanks,

kaht · Jan 25, 2008

Using (2) came closer but not exact. I guess this is because the pixel per letter is not always same thus nearly impossible match column's width.

Then why not use a fixed-width font like courier so that they line up correctly?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript"></script>
<style type="text/css">

select {
   font-family:Courier;
}

</style>
</head>
<body>

<select>
   <option value="1">190001&nbsp;&nbsp;&nbsp;-  110CC Dirt Bick</option>
   <option value="2">ABC&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- Alphabet Letters</option>
   <option value="3">HTML DOC&nbsp;- The world greatest HTML Book</option>
</select>

</body>
</html>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

southbeach · Jan 25, 2008

Exactly what I need! thank you very much !!!! 8) 8)

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Columnized Select Box 1

southbeach

Programmer

kaht

Programmer

southbeach

Programmer

Similar threads

Part and Inventory Search

Sponsor