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

x
?
Solved

HTML SELECT drop down width wider than select box

Posted on 2013-11-07
16
Medium Priority
?
2,885 Views
Last Modified: 2013-11-12
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?
0
Comment
Question by:dcjsdts
[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
  • 5
  • 4
  • 3
  • +2
16 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39632416
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.
0
 

Author Comment

by:dcjsdts
ID: 39632427
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.
0
 

Author Comment

by:dcjsdts
ID: 39632431
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.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 27

Assisted Solution

by:Cornelia Yoder
Cornelia Yoder earned 753 total points
ID: 39632456
You might try something like this:

#myselect {
width:200px;
}
#myselect option {
width:300px;
}


<select name="myselect" id="myselect" size="0">
<option value="1">Nice wide option one.</option>
<option value="2">Even wider and longer and bigger option two.</option>
etc...
</select>
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 39632462
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.
0
 

Author Comment

by:dcjsdts
ID: 39632483
I have tried all your suggestions, not applicable.   Please read example question and provide coded solution for full 500 points.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39632632
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.
0
 
LVL 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 249 total points
ID: 39632672
@dcjsdts, all of us that are commenting on your question already have a gazillion points and we'd love to help you to show how smart and helpful we are.  But so far, we can't find any way to make it work in IE.
0
 
LVL 27

Assisted Solution

by:Cornelia Yoder
Cornelia Yoder earned 753 total points
ID: 39632676
>>>>.... provide coded solution for full 500 points.

Do you know what Experts get for 500 points?   After around 100,000 points, we get a T-shirt.  And I have more T-shirts than I will wear out in a lifetime.

A little appreciation for trying to help is more reward than points :)

Good luck with your project.
0
 

Author Comment

by:dcjsdts
ID: 39632687
I was looking for something more efficient.
0
 

Author Comment

by:dcjsdts
ID: 39632689
With less code
0
 
LVL 27

Expert Comment

by:Cornelia Yoder
ID: 39632748
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
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 39632763
@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.
0
 
LVL 44

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 498 total points
ID: 39633182
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.
Looks like it's back to the drawing board for you :)

The problem you have is that things like DropDowns are part of the Browser Chrome, so they don't style as nicely as most other elements. If you look at a dropdown on a Mac, it will look different to a dropdown on a PC - that's just the way it is.

If it's really important to you, then you could use other elements, such as divs, ULs, buttons and wire up some jQuery to simulate a dropdown - you'd have full control of that, but like you say - it doesn't seem that important to you, so accept it for what it is and move on.

Spending a lot of time targeting one feature of one version of one browser really is a complete waste of time.
0
 
LVL 44

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 498 total points
ID: 39633187
Here's a jQuery plugin that'll do what you want:

designwithpc.com/Plugins/ddSlick
0
 
LVL 27

Accepted Solution

by:
Cornelia Yoder earned 753 total points
ID: 39633297
Why spend all this time worrying about how it looks in IE8 when you can upgrade for free.


http://windows.microsoft.com/en-us/internet-explorer/download-ie
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

636 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