Solved

Are breaks permitted on drop down menus?

Posted on 2002-05-06
5
148 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
5 Comments
 
LVL 33

Accepted Solution

by:
knightEknight earned 75 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

706 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

20 Experts available now in Live!

Get 1:1 Help Now