Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Are breaks permitted on drop down menus?

Posted on 2002-05-06
5
Medium Priority
?
197 Views
Last Modified: 2010-04-09
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.
0
Comment
Question by:qudoos
[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 Comments
 
LVL 33

Accepted Solution

by:
knightEknight earned 225 total points
ID: 6992061
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
 
LVL 19

Expert Comment

by:webwoman
ID: 6992110
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
 
LVL 2

Expert Comment

by:jpoesen
ID: 6993297
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
 
LVL 1

Author Comment

by:qudoos
ID: 6993920
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
 
LVL 33

Expert Comment

by:knightEknight
ID: 7008918
<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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

670 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