Link to home
Start Free TrialLog in
Avatar of dcjsdts
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:

<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>

Open in new window



How can I edit my SELECT statement to make this happen?
Avatar of Gary
Gary
Flag of Ireland image

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.
Avatar of dcjsdts
dcjsdts

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.
Avatar of dcjsdts

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.
SOLUTION
Avatar of Cornelia Yoder
Cornelia Yoder
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
Avatar of dcjsdts

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.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of dcjsdts

ASKER

I was looking for something more efficient.
Avatar of dcjsdts

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
@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
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial