onestar
asked on
how to set menu select box size width
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
agree with COBOLdinosaur (but there are still dragons to beat):
ASKER
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<
}
echo "</select></td>";
?><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<
}
echo "</select></td>";
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;?>]">
what if you moved the style to be first?
<select style="width: 50px;" name="qty[<?php echo $product_name;?>]">
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<
}
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.
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<
}
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.
> .. 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:)
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:)
"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.
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.
> 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)
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)
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.
Netscape 6.x I never use...I don't like it...and Mozilla...I will have to see what comes of that..
Max.
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
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
ASKER
ie 6
ASKER
Thanks I got it working now.
Onestar
Onestar
excellent, glad we could help. thanks for the A. :-)
Cd&