Combo box word wrapping

[oldmanInAz]

1) Script Title: Comboviewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...omboviewer.htm

Just want to know if there is any way to fix word wrapping in the combo box?
If I set the width to 300px and have an item that is 400px long, 100px are not shown.
From what I've been reading, there is no way in css to fix this.
Lots of people want word wrapping in combo boxes.

Please do not suggest grouping. The purpose of grouping does not fix word wrapping.

As an idea for you fine code writers, how about a tooltip that would show the truncated lines?

[jscheuer1]

In my mind this is really a non-issue because (in all current version browsers*) if you click on the combo box, it drops down and all choices are shown - and if any are longer than the width of the combo box, they are shown in their entirety because the drop down is as wide as the longest choice.


*The only exception, sort of, is IE. But its current version (9) does work this way. Unfortunately IE version 8 and less do not and many people are limited by their OS so as that they cannot update to version 9.

However, for them you can use the title attribute, example:

    <option title="Difference between Java and JavaScript and a Whole Lot More">Difference between Java and JavaScript and a Whole Lot More</option>

Or add this script before the closing </body> tag:

<!--[if lt IE 9]>
<script type="text/javascript">
(function(){
	var opts = document.getElementsByTagName('option'), sels = document.getElementsByTagName('select'), i;
	function titleit(){
		this.title = this.options[this.options.selectedIndex].title;
	}
	for (i = opts.length - 1; i > -1; --i){
		if(!opts[i].title){
			opts[i].title = opts[i].text;
		}
	}
	for (i = sels.length - 1; i > -1; --i){
		(function(sel){
			sel.attachEvent("onmouseover", function(){titleit.call(sel);});
			sel.attachEvent("onchange", function(){titleit.call(sel);});
		})(sels[i]);
	}
})();
</script>
<![endif]-->

[oldmanInAz]

Tried your script. I could see no change.
Without a width in the <option> css, I have one title that is extremely long.
Many others go beyond a 300px width.
For my next trick I'm gonna try one of your tooltip tricks and see what happens.
Thanks for the thought.

[jscheuer1]

Worked for me. Perhaps you don't understand what it's intended to do, which is:

• In browsers (all except IE 8 and less) that support showing the entire width of the choices in the drop down when it is clicked on, it does nothing.
  
  
• In IE 8 and less, it provides a tooltip on hover that shows the choice. It does this on the select even when it isn't open, and on the options individually when it is open.

Note: I considered making this the behavior for all browsers, but some browsers which support the longer option text on click get confused by the code. So, as I said - there's almost no reason to do this anyway, except in IE 8 and less.

Here's a demo:

http://home.comcast.net/~jscheuer1/s...bo_box_viewer/

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[oldmanInAz]

Nice demo. Not what I had in mind.
My list box will have several hundred items in it.
Next question.
Can the script be altered so that one can use a divison that contains the list anchored tags?
Such as
<div name="list">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
</div>
Then word wrapping would be easy to control.

http://1littleworld.net/combo1.html

[jscheuer1]

The code I offered is not on that page. The number of options should be immaterial. If I run the script code I provided on that page in IE 8, it works as intended.

However, as far as I can see, you have no options longer than the width of the select.

There are one or more scripts around the web which substitute divs for selects and their options making more options for styling. The select tag is one of the most limited elements as far as style goes. It's meant to be used for its utility, not its beauty or layout.

See:

http://seesparkbox.com/foundry/jquer...ect_box_plugin

And for more choices:

https://www.google.com/search?client...hannel=suggest

If you find one that you like, we can probably make it work with this script.

[sunnah]

@jscheuer1: I understand what your solution is doing but I still get the exact representation as the initial problem on this thread. My combo box is fixed width and the drop down area is a fixed width. But the few items that exceed the fixed width just bleed off instead of wrapping to the next line. So, ultimately the drop down area displays all of the <option> items whether they are short or long. My drop down <option> items are dynamically populated so I cannot easily go in a adjust each one I am looking for a global solution. Primarily I am trying it with CSS and all the wrapping styles have not worked.