Sean Gates' Blog » HTML http://www.seangates.com By the looks of it {he thinks} he knows what he's doing. Sat, 10 Jul 2010 21:22:04 +0000 en hourly 1 http://wordpress.org/?v=3.0 Columns in Select Boxes http://www.seangates.com/2007/03/23/columns-in-select-boxes/ http://www.seangates.com/2007/03/23/columns-in-select-boxes/#comments Fri, 23 Mar 2007 20:17:44 +0000 Sean http://blog.seangates.com/?p=36 I came across a problem yesterday where I needed to create columns in select boxes. My issue revolved around showing an ID in the left column, and a description of the ID in the right column. This is due to the fact that people in our organization know most things by their ID, but my not know how to distinguish between similar IDs. The ids are alphanumeric. For example: SYS2007. This could mean “System 2007″. Then there could be one called SYS2007B. Similar, but different.

So, I searched the web and found nothing about doing it in HTML or CSS (I figured as much but gave it a shot anyway). Then I came up with this idea: use a fixed width font and fill in missing spaces. So, I made the select box use courier.

<select ... style="font-family: courier;">

Then I set about populating the box (using PHP of course) and came up with a small tidbit to fill in the extra spaces:

formatID($id){
$str_length = strlen($id);
for($i=0; $i<(15-$str_length); $i++){
$add_spaces = $add_spaces . ' ';
}
return $id . $add_spaces;
}

Now, I use the function when looping through and building the select box:

foreach($ps as $p){
echo '<option id="' . $p->ID . '"
value="' . $p->ID . '">' .
formatSCN($p->ID) . $p->Title .
'</option>';
}

So, now what comes out is a column at the front that is formatted with a fixed width of characters. Now you could do this if you wanted to format any number of columns, and not just the first. It may be cool if this showed 5 or 10+ columns of data. But, that may be a usability issue.

]]> http://www.seangates.com/2007/03/23/columns-in-select-boxes/feed/ 0