Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

how to set menu select box size width

Posted on 2002-07-22
14
Medium Priority
?
773 Views
Last Modified: 2008-02-26
Hi, I have a simple question (I hope).

How to I set the width of a Drop down menu select box?

Example:
<select name="select">
    <option>1</option>
    <option>222</option>
  </select>

Normally the width is set dynamiclly by the largest value. I want set the width myself. I have bunch of select boxes that I want to all be the same size just to make thing look a little neater.

Thanks Onestar
0
Comment
Question by:onestar
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 3
  • +2
14 Comments
 
LVL 18

Accepted Solution

by:
bruno earned 200 total points
ID: 7170386
a few options:


<select name="select" width="300">
   <option>1</option>
   <option>222</option>
 </select>


<select name="select" style="width: 300px;">
   <option>1</option>
   <option>222</option>
 </select>



<select name="select">
   <option>---------- select one --------------</option>
   <option>222</option>
 </select>


if i remember correctly, first option works best with older versions of NS, second works better with newer browser, third is most reliable, except font rendering might be different on different machines and browsers.



BRUNO
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7170419
The second method Bruno posted is the preferred method for modern browsers.  If relic browsers have to be supported the third method is best.


Cd&
0
 
LVL 51

Expert Comment

by:ahoffmann
ID: 7170495
agree with COBOLdinosaur (but there are still dragons to beat):
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 1

Author Comment

by:onestar
ID: 7170917
I tried what you said and it worked fine on a simple select box but it won't seem to work on this piece of html with php. Any thoughts ?

?><tr><td><select name="qty[<?php echo $product_name;?>]" style="width: 50px;"><?php
        for ($qty_loop = 1; $qty_loop <= $qty; $qty_loop++)
        {
            echo "<option value=$qty_loop>$qty_loop</option>";
        }
        echo "</select></td>";
0
 
LVL 18

Expert Comment

by:bruno
ID: 7171004
ummmm.....not sure what to say on that one, I don't know PHP, but your code seems to be correct in terms of how you applied the style.

what if you moved the style to be first?

<select style="width: 50px;" name="qty[<?php echo $product_name;?>]">
0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 7171183
For the new browsers you can use both style and width at the same time.. Netscape will use the width property and Internet Explorer will use the style property...

So...

?><tr><td><select name="qty[<?php echo $product_name;?>]" style="width: 50px;" width="50"><?php
       for ($qty_loop = 1; $qty_loop <= $qty; $qty_loop++)
       {
           echo "<option value=$qty_loop>$qty_loop</option>";
       }
       echo "</select></td>";

That will make the select be the same size in both NS as IE, as long as the select options are not wider than the 50 px you tell it to be...

Max.
0
 
LVL 51

Expert Comment

by:ahoffmann
ID: 7171307
> .. as long as the select options are not wider than the 50 px
That's the dragon: I don't no of any browser which takes care of the tag's WIDTH attribute if the OPTION texts are longer, just the width in stylesheet.

BTW, I would use:
   width:30em; /* or an appropriate value */
this  would not match the WIDTH attribute, but render the page accurate even the user uses his own fonts.
(and someone will complain that only px are reliable for layout, but L in htmL stands for language:)
0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 7171327
"That's the dragon"
No...I am.. :-) (At least in Chinese Astrology I am..)

Netscape is a terrible browser, we all know that, but on the other hand, yes it stretched when the options in the select are longer than what you stated....but doesn't that kinda make sense? I mean, if not, you would not be able to read the complete option's text.

As for Internet Explorer...you can get that to do just about EVERYTHING....

Max.
0
 
LVL 51

Expert Comment

by:ahoffmann
ID: 7171368
> you would not be able to read the complete option's text.
Netscape 6.x, 7.x and Mozilla can (they have a horizontal scrollbar:-))

> As for Internet Explorer...you can get that to do just about EVERYTHING.
NO (not shure about IE 6).
long text are cut (as in most browsers) when using CSS, or the WIDTH attribute is ignored (as in most browsers)
0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 7171382
That's what I mean...you can get that to do stupid things...like creating option fields that are not wide enough to show the text in them...

Netscape 6.x I never use...I don't like it...and Mozilla...I will have to see what comes of that..

Max.
0
 
LVL 18

Expert Comment

by:bruno
ID: 7172064
onestar,

i'm sorry, after reading the last few comments I realize when you last posted I didn't even think that it was becoming LONGER  that it should be.  what browser are you using?  As was stated, usually it will cut the option to the length you wanted, but older ones might not work properly.

BRUNO
0
 
LVL 1

Author Comment

by:onestar
ID: 7172069
ie 6
0
 
LVL 1

Author Comment

by:onestar
ID: 7172085
Thanks I got it working now.

Onestar
0
 
LVL 18

Expert Comment

by:bruno
ID: 7172089
excellent, glad we could help.  thanks for the A.  :-)
0

Featured Post

Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

618 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