Solved

Combo Box wrap

Posted on 2003-11-24
5
527 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
  • 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 50 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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
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…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

744 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

9 Experts available now in Live!

Get 1:1 Help Now