Solved

HTML SELECT drop down width wider than select box

Posted on 2013-11-07
16
2,344 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
  • 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
 
LVL 27

Assisted Solution

by:yodercm
yodercm earned 251 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 82

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 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 83 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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 27

Assisted Solution

by:yodercm
yodercm earned 251 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:yodercm
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 82

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 42

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 166 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 42

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 166 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:
yodercm earned 251 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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

759 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now