Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML CSS

Displaying multiple-column like option in drop down

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: macek, egami, gesf

Displaying multiple-column like option in drop down

Postby gbfar » Tue Nov 07, 2006 3:01 am

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: Select all
$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 .= "&nbsp;";
        }
    }
// second part for option
    $len = strlen($part_cost_arr[$iiii]);
    if($len<$maxlen){
        for($i=$len+1; $x2y<=$maxlen; $x2y++){
              $space2 .= "&nbsp;";
        }
    }
// third part for option
    $len = strlen($part_price_arr[$iiii]);
    if($len<$maxlen){
        for($i=$len+1; $x2y<=$maxlen; $x2y++){
       $space3 .= "&nbsp;";
        }
    }
// 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
gbfar
New php-forum User
New php-forum User
 
Posts: 24
Joined: Tue Aug 16, 2005 10:40 am

Postby gesf » Tue Nov 07, 2006 3:13 am

Do something like this:
Code: Select all
<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>
;)
User avatar
gesf
Moderator
Moderator
 
Posts: 1718
Joined: Sun Dec 29, 2002 5:03 am
Location: Portugal / Sweden

Postby gbfar » Tue Nov 07, 2006 3:22 am

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
gbfar
New php-forum User
New php-forum User
 
Posts: 24
Joined: Tue Aug 16, 2005 10:40 am

Postby gesf » Tue Nov 07, 2006 3:28 am

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.
User avatar
gesf
Moderator
Moderator
 
Posts: 1718
Joined: Sun Dec 29, 2002 5:03 am
Location: Portugal / Sweden

Postby gbfar » Tue Nov 07, 2006 3:37 am

Here is the link- http://gerberelec.com/testing/dropdowntest.php
The dropdown boxes are the ones where I am trying to align the text because if you click on it you would see they aren't aligned.
Thanks!

GBFAR
gbfar
New php-forum User
New php-forum User
 
Posts: 24
Joined: Tue Aug 16, 2005 10:40 am

Postby gesf » Tue Nov 07, 2006 3:50 am

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!
User avatar
gesf
Moderator
Moderator
 
Posts: 1718
Joined: Sun Dec 29, 2002 5:03 am
Location: Portugal / Sweden

Postby gbfar » Tue Nov 07, 2006 8:12 am

Thanks once again! I actually used "_" instead of space (&nbsp;) with your code and it came very nice.

GBFAR
gbfar
New php-forum User
New php-forum User
 
Posts: 24
Joined: Tue Aug 16, 2005 10:40 am

Postby gesf » Tue Nov 07, 2006 6:08 pm

:)
User avatar
gesf
Moderator
Moderator
 
Posts: 1718
Joined: Sun Dec 29, 2002 5:03 am
Location: Portugal / Sweden

Postby gbfar » Wed Nov 08, 2006 2:21 am

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
gbfar
New php-forum User
New php-forum User
 
Posts: 24
Joined: Tue Aug 16, 2005 10:40 am

Postby gesf » Wed Nov 08, 2006 5:42 am

Nahh... you can't! The only way whould be something like:
Code: Select all
<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 ;)
User avatar
gesf
Moderator
Moderator
 
Posts: 1718
Joined: Sun Dec 29, 2002 5:03 am
Location: Portugal / Sweden

Postby gbfar » Wed Nov 08, 2006 8:43 am

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
gbfar
New php-forum User
New php-forum User
 
Posts: 24
Joined: Tue Aug 16, 2005 10:40 am

Postby gesf » Wed Nov 08, 2006 7:06 pm

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.
User avatar
gesf
Moderator
Moderator
 
Posts: 1718
Joined: Sun Dec 29, 2002 5:03 am
Location: Portugal / Sweden


Return to CSS

Who is online

Users browsing this forum: No registered users and 1 guest

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.

cron