• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 8978
  • Last Modified:

HTML: Word Wrap <SELECT> <OPTION>

Hi All,


Is it possible to word wrap the selection options in HTML?

I want the use to choose between three sentenses, but they are pretty long, so would like to word wrap them.


0
detox1978
Asked:
detox1978
1 Solution
 
qwerty021600Commented:
You can define word wrap in css and call that class in Select option. It is possible.
0
 
detox1978Author Commented:
can you provide a sample as i can't get that to work
0
 
level9wizardCommented:
<!-- html -->
<select name="mySelect">
    <option class="optionWrap"> ...</option>
</select>

/* css */
.optionWrap
{
    width: 100px;
}

Set the width should do it.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
detox1978Author Commented:
I want to word wrap (put one option on several lines).

The code you present, doesn't do this.
0
 
qwerty021600Commented:
You need to create a custom control for this. Either a Telerik control or through Ajax ToolKit.

Refer this:
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/
0
 
detox1978Author Commented:
can you give a little more information?
0
 
Chad HaneyChief Technology OfficerCommented:
With the select option this is not possible.  As Identified by qwerty I would recomend an Ajax control, or create a custom control utilizing css to hide the options until the form button is clicked, then when the option is selected it populates a hidden input field with the select value, and you populate a readonly input box (or just a span) with the text value.

here is a mock up:
//script
function showValues(){
     document.getElementById('selectOptions').style.display="block";
}
function setValue(theValue, theText){
     document.getElementById('selectValue').value=theValue;
     document.getElementById('displayValue').value=theText;
     document.getElementById('selectOptions').style.display="none";
}

//code
<form>
<input type="hidden" name="selectValue" id="selectValue"/>
<input type="text" readonly="readonly" onclick="showValues()" id="displayValue"/>
<ul id="selectOptions" style="display:none">
<li><a href="javascript:setValue('[SelectValue]', "Item 1");">Item 1</a></li>
<li><a href="javascript:setValue('[SelectValue]', "Item 2");">Item 2</a></li>
</ul>
</form>
0
 
detox1978Author Commented:
I guess i could use CSS to make a combo looking box that does this.
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now