I am a genius. They said it couldn’t be done, but here it is.
At work, we occasionally have to deal with exceptionally long item names in drop-down menus. We came up with a trick to control the width of the initial box, but the drop-down expanded to normal, bloated size when clicked. We’ve been searching frantically for some way to wrap long item names in select boxes, but kept hitting a wall.
Well, with some outside-of-the-box thinking, I came up with a solution. It functions just like a select box, but it’s a scrolling div full of a long set of radio buttons. Here’s an example:
Here’s a link to the trick in action.
Looks like a select box, but it’s actually much more complicated. Try it out. Also, it’s set up to work with tableless forms, so you’re encouraged to use those.
Anyway, here’s the code for the above:
CSS
#programs_container {
float: left;
}
#programs {
position: absolute;
width: 300px;
padding: 2px;
border: 1px solid #7F9DB9;
background-color: #FFF;
}
#programs div {
margin: 0px;
font-weight: bold;
}
#programs div div {
float: right;
}
#programslist {
display:none;
height: 200px;
overflow: auto;
}
#programslist input {
float: none;
margin: 0px 10px;
}
#programslist label {
display: block;
float: none;
margin: 0px;
padding-left: 37px;
text-indent: -37px;
text-align: left;
font-weight: normal;
}
#programslist label:hover {
background: #C1E2F0;
}
JavaScript
function toggle(obj_id)
{
var obj = document.getElementById(obj_id);
obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
}
function selectProgram(program_id)
{
var program = document.getElementById(program_id);
program.checked = true;
document.getElementById('selectedProgram').innerHTML = program.value;
document.getElementById('programslist').style.display = 'none';
}
HTML
<div id="programs_container">
<div id="programs">
<div onclick="toggle('programslist');"><div>↓</div> <span id="selectedProgram">Select a program</span></div>
<div id="programslist">
<p><strong>Group 1</strong></p>
<label onclick="selectProgram('program1');"><input type="radio" name="program" id="program1" value="Program 1" /> Program 1</label>
<label onclick="selectProgram('program2');"><input type="radio" name="program" id="program2" value="Program 2" /> Program 2</label>
</div>
</div>
</div>
Edit: It’s ironic that a post about code would have its code garbled. This is a limitation in the WordPress plugin that I’m using to preserve the code format. I’m hoping for a fix soon. In the meantime, visit the example page and steal the code from that.