Solved

HTML:  Word Wrap <SELECT> <OPTION>

Posted on 2009-04-01
8
7,068 Views
Last Modified: 2013-11-19
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
Comment
Question by:detox1978
8 Comments
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24038256
You can define word wrap in css and call that class in Select option. It is possible.
0
 
LVL 2

Author Comment

by:detox1978
ID: 24038275
can you provide a sample as i can't get that to work
0
 
LVL 11

Expert Comment

by:level9wizard
ID: 24041671
<!-- html -->
<select name="mySelect">
    <option class="optionWrap"> ...</option>
</select>

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

Set the width should do it.
0
ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 
LVL 2

Author Comment

by:detox1978
ID: 24044026
I want to word wrap (put one option on several lines).

The code you present, doesn't do this.
0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24046843
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
 
LVL 2

Author Comment

by:detox1978
ID: 24051969
can you give a little more information?
0
 
LVL 12

Accepted Solution

by:
Chad Haney earned 500 total points
ID: 24398658
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
 
LVL 2

Author Comment

by:detox1978
ID: 24400505
I guess i could use CSS to make a combo looking box that does this.
0

Featured Post

Ransomware: The New Cyber Threat & How to Stop It

This infographic explains ransomware, type of malware that blocks access to your files or your systems and holds them hostage until a ransom is paid. It also examines the different types of ransomware and explains what you can do to thwart this sinister online threat.  

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

832 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