dcjsdts
asked on
HTML SELECT drop down width wider than select box
Sorry for the copy and paste of my request but it is the best way to explain it.
One of the most designer-annoying features of SELECTs is that they are as wide as their longest option. Most browsers will cut off options that are longer than the defined width, something that may render them useless.
....drop-down select box drop-down width is controlled separately from the width of the select box itself....
...give the effect of a drop-down select box whose drop-down width is controlled separately from the width of the select box itself
I need a drop-down that is a fixed with but when you drop it down - the viewable list is wide (enough) to see all the data.
THIS NEEDS TO WORK IN IE ONLY - and this is just a temporary application.
See example here:
Example 1
Another description with image here:
Example 2 Notice the Firefox rendition - That's what I want to achieve.
My actual code is much to complicated and will muddy the waters. So a great example is as follows. I am using optgroups and I need my LIST to drop down to the widest optgroup label. But, I need my SELECT box static.
If I can't do this simply without a zillion lines of code, it is not worth it for me. I will change my design.
Use the example here: OptGroups
I am requesting specific examples with my existing code. (don't worry about the PHP/MySQL) that's why I gave the static example. I need this in 24 hours or I have to choose another path. Max points for this.
My current code in the actual situation:
How can I edit my SELECT statement to make this happen?
One of the most designer-annoying features of SELECTs is that they are as wide as their longest option. Most browsers will cut off options that are longer than the defined width, something that may render them useless.
....drop-down select box drop-down width is controlled separately from the width of the select box itself....
...give the effect of a drop-down select box whose drop-down width is controlled separately from the width of the select box itself
I need a drop-down that is a fixed with but when you drop it down - the viewable list is wide (enough) to see all the data.
THIS NEEDS TO WORK IN IE ONLY - and this is just a temporary application.
See example here:
Example 1
Another description with image here:
Example 2 Notice the Firefox rendition - That's what I want to achieve.
My actual code is much to complicated and will muddy the waters. So a great example is as follows. I am using optgroups and I need my LIST to drop down to the widest optgroup label. But, I need my SELECT box static.
If I can't do this simply without a zillion lines of code, it is not worth it for me. I will change my design.
Use the example here: OptGroups
I am requesting specific examples with my existing code. (don't worry about the PHP/MySQL) that's why I gave the static example. I need this in 24 hours or I have to choose another path. Max points for this.
My current code in the actual situation:
<select size="1" style="width:100;" id="NewTag" name="NewTag" onChange="setDevices(this);">
<option selected><? print($row[NewTag]); ?></option>
<?
$sql_prg = "SELECT * from Models ORDER BY AssetTag";
$result_prg = mysql_query($sql_prg);
$group_prg = array();
while ($row_prg = mysql_fetch_assoc($result_prg)){
$model[$row_prg['Model']][] = $row_prg;
}
foreach ($model as $key_prg => $values){
echo '<optgroup label="'.$key_prg.'">';
foreach ($values as $value){
echo '<option value="'.$value['AssetTag'].'"> '.$value['AssetTag'].' </option>';
}
echo '</optgroup>';
}
?>
</select>
How can I edit my SELECT statement to make this happen?
What's wrong with following the solution in the first link you gave - I assume this is for IE8 since you can set the dropdown width in IE9+ without affecting the actual dropdown options.
ASKER
It is FIVE functions and multiple interpretations of foo, realfoo and dummy.
I need a real solution on how to apply THAT technology to MY code.
I need a real solution on how to apply THAT technology to MY code.
ASKER
By the way, this can be used ONLY in IE9 if needed. Just tell me how.
This is a one time purpose PHP app I am writing.
This is a one time purpose PHP app I am writing.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You need to add 'px' to your style: style="width:100px;" But that won't work right in IE8. It just makes all of the options be 100px also.
ASKER
I have tried all your suggestions, not applicable. Please read example question and provide coded solution for full 500 points.
Let me see if I have got this right...
You think that 500 points actually means anything to us - you're wrong - until it buys me beer points mean nothing
So what if it has 5 functions - if that is what is needed to make it work then tough luck, that is what you need to use.
It is 1 select box with your options and a dummy select box that has no options but positioned to simulate a smaller dropdown.
You think that 500 points actually means anything to us - you're wrong - until it buys me beer points mean nothing
So what if it has 5 functions - if that is what is needed to make it work then tough luck, that is what you need to use.
It is 1 select box with your options and a dummy select box that has no options but positioned to simulate a smaller dropdown.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I was looking for something more efficient.
ASKER
With less code
I don't exactly understand why you are ignoring my code above. It works fine, doing what you say you want:
http://www.galaxiesablaze.com/EE0045.php
http://www.galaxiesablaze.com/EE0045.php
@yodercm, it does not work in IE8 on my machine. The select box and the options in the dropdown are the same width. I don't have any newer IE version to test it.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.