Displaying multiple-column like option in drop down

  • Thread starter Thread starter Anonymous
  • Start date Start date
A

Anonymous

Guest
Hello Everyone!

For my project I need a drop down box which will have 3 columns of text inside (to display; not actually). The problem is they are all numbers and need to be aligned right. I tried everything from calculating space to using CSS (white-space: pre), the <pre> tag or label but nothing works. While looking at the code it shows correct number of space being added to align but still it doesn't show up aligned in the drop down box.

Code: 
$pricing_price_break = "<select id='pricing_break' name='pricing_break'>";
$maxlen = 15;

// this whole section runs through loop to retrieve data from database for all three arrays - quantity, cost and price
whille($row=mysql_fetch_array($sql)){
// first part for option
    $len = strlen($part_quantity_arr[$iiii]);
    if($len<$maxlen){
        for($i=$len+1; $x2y<=$maxlen; $x2y++){
	    $space1 .= " ";
        }
    }
// second part for option
    $len = strlen($part_cost_arr[$iiii]);
    if($len<$maxlen){
        for($i=$len+1; $x2y<=$maxlen; $x2y++){
       	    $space2 .= " ";
        }
    }
// third part for option
    $len = strlen($part_price_arr[$iiii]);
    if($len<$maxlen){
        for($i=$len+1; $x2y<=$maxlen; $x2y++){
	    $space3 .= " ";
        }
    }
// putting everything together to create the option
    $everything = "<pre>$space1$part_quantity_arr[$iiii]pc $space2$$part_cost_arr[$iiii] $space3$$part_price_arr[$iiii]</pre>";
    $pricing_price_break .= "<option value=\"$iiii\">$everything</option>";
} // end of while loop
$pricing_price_break .= "</select>";

How can we align three sets of texts as single text for drop down option? If this is placed on the page otherwise, it works fine. Can anyone help please?


Thanks!

GBFAR
 
Do something like this:
Code: 
<html>
<head>
     <style type="text/css">
          option.right {
               text-align: right;
          }
          option.center {
               text-align: center;
          }
     </style>
</head>
<body>
     <select>
          <option>whatever 1</option>
          <option class="right">whatever 2</option>
          <option>whatever 3</option>
          <option class="center">whatever 4</option>
          <option></option>
     </select>
</body>
</html>
;)
 
Thanks gesf! But all three parts of data (quantity, cost & price) needs to go together to create one option. That's where I need to align them so when down arrow is clicked all the options show up aligned related to each other. Next database record will create option 2.

Thanks for your help!

GBFAR
 
Try the code i've posted ;)
Please give me some example (html or possible output) of what you're saying.... i don't think i got it.
 
So as you can see from the html source, the alignment is being made by a bunch of "spaces".
That's not clean at all, but seems the only way for your case.
So align all the text at right via some style (above) and this same result text (those three together) will already have some "spaces" inside to separate them.
Yep... that's the only way!
 
Thanks once again! I actually used "_" instead of space ( ) with your code and it came very nice.

GBFAR
 
Hi again gesf!

Well, I thought I was cleaver. :D

When I used the "_" instead of spaces it aligned all the text parts very nicely but now the problem is a little tricky. I tried to specify color as white so the underscores (_) aren't visible but that doesn't work. Do you know how to specify different styles at different parts of texts in one single option? If I apply style to option itslef it works fine but then all the texts take same style and then not visible. How do we specify white for underscores and black or red for the real text? Please help once again!

Thanks!

GBFAR
 
Nahh... you can't! The only way whould be something like:
Code: 
<option><span class="style1">whatever</span> whatever</option>
But logically... this is totally wrong!
There are tons of different and cool DOM drop-down menus out there. Give it a try ;)
 
Hey thanks for you help. Please tell me which DOM drop down you are guiding me to. The <span></span> didn't work either.

Thanks!

GBFAR
 
I'm not talking about any particular script.
With a DOM drop-down / menu you can have a great and self styled drop-down.
You can find some googling.
 
You must log in or register to reply here.
Back
Top