?
Solved

Combo Box wrap

Posted on 2003-11-24
5
Medium Priority
?
534 Views
Last Modified: 2008-03-17
Hello,

I was wondering if it was possible to wrap longer entries around in a combo box.  When I was trying to find an answer to this problem on the net, I remember reading (not sure where) that it was only possible through CSS.  Is this true, and if so, what do I need to do to implement it.

Any help would be appreciated

P.S, if its not possible through CSS, but is through some other method, I would like to hear them.
0
Comment
Question by:Sebastion
[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
  • 2
  • 2
5 Comments
 
LVL 17

Expert Comment

by:dorward
ID: 9816330
Combobox? HTML doesn't have a combobox, perhaps you mean a <select> element which many browsers render a list boxes or drop down menus (a combobox is a drop down menu combined with a text entry field).

You can't cause text to wrap in them in any current browser (short of trying to recreate the drop down menu using a heaft bunch of JavaScript which isn't reliable).

You might consider switching to radio buttons instead, you could place them inside a div with overflow, height and width set if you want to keep them in a small space..
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9821364
Hi,

The following is probably the best you can do with javascript -- not very pretty nor elegant, but reliable (works in NN4.7 -- which is the test imho):

<form name='a'>
<select name="b">
<option>aaaaaaaaaaaaabbbbbbbbbbbbbbccccccccccccccccc</option>
</select>
<script>
selObj = document.a.b
x = selObj.options[0].text;
if (x.length > 20)
{
  selObj.options[0].text = x.substr(0,19)
  selObj.options[1] = new Option(x.substr(20),selObj.options[0].value)
}
</script>
</body>

Vinny
0
 

Author Comment

by:Sebastion
ID: 9878780
Hello,

I'm sorry guys, but that isn't what I was looking for.  VincentPuglia, it looks like the code you have given would make a text two different options if it went over 20 characters, but that wouldn't be what I'm after.

I waited this long to reply in the hope that someone else would have possibly offered a solution, but since they haven't, I'm going to opt to close down the question soon.  I close it down in about 3 days, in order to give you two some time to raise any objections (if you have any).

Thanks for your help anyway
0
 
LVL 15

Accepted Solution

by:
VincentPuglia earned 150 total points
ID: 9882458
Hi

As dorward pointed out, there is no real solution.  My solution is a workaround:

>>would make a text two different options if it went over 20 characters
simply give both options the same values. in other words, treat them as one option

function doit(ndx,selObj)
{
even = (ndx % 2 == 0)
txt = (even)  ?
  selObj.options[ndx].text + ' '+selObj.options[ndx+1].text :
  selObj.options[ndx-1].text +' '+ selObj.options[ndx].text
alert(txt)
}
//-->
</script>
</head>
<body>
<select onchange='doit(this.selectedIndex, this)'>
<option>this is </option>
<option> a test</option>
<option>this is another</option>
<option>test</option>
</select>

Vinny
0
 

Author Comment

by:Sebastion
ID: 9886088
VincentPuglia, again, wouldn't that create 4 different options instead of just wordwrapping 1?  What I was after, was code that could word wrap a list box's options (similar to Microsoft Access, which word wraps but still makes it one option, so if the user highlights it, they highlight both rows).

Due to the fact that this page was due a few days ago, I have opted (for now) to use radio boxes, because (as been said) there seems to be no real solution.

>>would make a text two different options if it went over 20 characters
>>simply give both options the same values. in other words, treat them as one option

This would get confusing to a user (who may not be that computer literate), as some of the options would possible go over 30 words long and with about 5-6 options per question, they may or may not be able to tell where each question starts.

I agree that there may be work-arounds, and they may work in some scenarios with smaller options, however they would not work in my scenario nor with my intended audience.

I am willing to give you the points for this question as the answer might help other people who are experiencing similar problems to me (only on a smaller scale).
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month9 days, 9 hours left to enroll

762 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