Are breaks permitted on drop down menus?

can a menu item be on two lines. menu seems to extend to the length of the widest menu element. so that takes up alot of room.. can we break an element on two lines?  if so, then how?
also, can we set a width of the menu so that it doesn't strech out.  only the elements strech out.
LVL 1
qudoosAsked:
Who is Participating?
 
knightEknightCommented:
You could create two options with broken text, but with the same "value", so that either one that is selected will result in the same thing.  Like this:

<SELECT>
  <OPTION value='1'>This would be</option>
  <OPTION value='1'>_______the number one</option>
  <OPTION value='2'>This would be</option>
  <OPTION value='2'>_______the number two</option>
</select>

if either the first or second option is selected, the server will see "1"

will also work with text:

  <OPTION value='This would be the number 1'>This would be</option>
  <OPTION value='This would be the number 1'>____the number one</option>

0
 
webwomanCommented:
knightEknight's way is the only way you can do it that is cross-browser compatible, doesn't require a ton of scripting, specially constructed elements, and lots and lots of layers.

And in my mind, the path of least resistance (and easiest updating later on) is normally the best one. ;-)

Unless you really have some reason for using layers and lots of scripting to accomplish the same thing... sometimes the client requests it, sometimes you just want to see if it can be done. I can understand that. If so, somebody else probably has some tips. But it won't be easy... ;-)
0
 
jpoesenCommented:
perhaps you could consider using a <select multiple> and then add some javascript that will automatically select both lines if you select 1 of them...

alternativelyas previously suggestes, there are a number of freely downloadable dhtml versions of dropdown boxes.

for example, check out
http://webfx.eae.net

Good luck
S.
0
 
qudoosAuthor Commented:
Thank you for your reply.  I had this in mind too but I guess there is no way of highlighting both lines at the same time so that the user doesn't get confused.
Is there any way so that the menu is a fixed width and doesn't strech out to the widest element?

Thank you for your answer and I'll be using it.
q
0
 
knightEknightCommented:
<HTML>
<HEAD>
<SCRIPT language='javascript'>

 function selectAllWIthCurrentValue(theSelect)
 {
   var sValue = theSelect.options[theSelect.selectedIndex].value;

   for ( var i=0,n=theSelect.options.length; i<n; i++ )
     if ( theSelect.options[i].value == sValue )
        theSelect.options[i].selected = true;
 }

</script>
</head>

<BODY>

<FORM name='myform'  >
<SELECT  multiple size='5'  onChange='selectAllWIthCurrentValue(this);'>
 <OPTION value='1'>This would be</option>
 <OPTION value='1'> &nbsp; the number one</option>
 <OPTION value='2'>This would be</option>
 <OPTION value='2'> &nbsp; the number two</option>
 <OPTION value='3'>This would be</option>
 <OPTION value='3'> &nbsp; the number three</option>
 <OPTION value='4'>This would be</option>
 <OPTION value='4'> &nbsp; the number four</option>
 <OPTION value='5'>This would be</option>
 <OPTION value='5'> &nbsp; the number five</option>
</select>
</form>

</body>
</html>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.