I have created a SELECT list wherein multiple options can be selected. I have it placed within a table cell. Everything works fine except it is just too wide for the space I have allowed for it. This is due to there being long text displayed in some of the individual OPTION items. So the entire list is as wide as the longest line. but I must keep the exact text, so I can't shorten them. How can I force it to be smaller? I'd like to avoid changing the font, so I tried forcing the displayable text onto 2 lines with < BR > but apparently the list won't allow more than one display line per item. Also I tried limiting the width of the table cell it was in, but I failed there too. Would something in CSS do it? Thanks for your help.
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
How to limit the width of a SELECT option list? 1
- Thread starter dbMark
- Start date
-
1
- #2
dwarfthrower
Programmer
[tt]select style="width:100px">[/tt]
Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.
Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.
- Thread starter
- #3
Dwarfthrower, I had placed the limit on the table cell, not the select. You had it right, but now I cannot see the entire line since it does not word-wrap. Any hope for that? Or else I'll have to change the specs, or shrink the font, both choices I'd rather avoid...
By the way, aren't you ever offline?
By the way, aren't you ever offline?
dwarfthrower
Programmer
Hmmm... Wrapping the text in an option is just one of those things that for some reason, you just can not do. Probably stems from the fact that select controls are handled differently to other HTML form controls.
The only way around it that I could see was to build a DHTML widget that looked and acted like a select control, but was actually just a series of divs that passed values back to a standard input control (text or hidden).
The sample below demonstrates what I'm getting at:
* Tested with IE6 under Win2K
Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.
The only way around it that I could see was to build a DHTML widget that looked and acted like a select control, but was actually just a series of divs that passed values back to a standard input control (text or hidden).
The sample below demonstrates what I'm getting at:
Code:
<html>
<head>
<style type="text/css">
.DHTML_Select_Control{
width: 150px;
height: 100px;
overflow-x: none;
overflow-y: auto;
border-left: 3px inset #DDDDDD;
border-top: 3px inset #DDDDDD;
border-right: 3px inset #EEEEEE;
border-bottom: 3px inset #EEEEEE;
}
.DHTML_Select_Option{
font-family: Helvetica;
font-size: smaller;
color: #000000;
}
.DHTML_Select_Option_Selected{
font-family: Helvetica;
font-size: smaller;
color: #FFFFFF;
background: #000066;
}
.DHTML_Select_Option_Clicked{
font-family: Helvetica;
font-size: smaller;
color: #FFFFFF;
background: #000066;
border: 1px dotted #FFFFFF;
}
</style>
<script type="text/javascript" language="JavaScript">
//document.onselectstart=new Function ("return false");
var option_last_clicked;
function handleSelectClick(objClickedOn, strHiddenFieldID){
event.cancelBubble = true;
var objTheOption = event.srcElement;
if(objTheOption != objClickedOn){
var strTheOptionValue = objTheOption.value;
if(!event.ctrlKey){
if(!event.shiftKey){
//neither shift or ctrl were held down during the click
for(var i = 0; i < objClickedOn.childNodes.length; i++){
var currNode = objClickedOn.childNodes.item(i);
currNode.className = 'DHTML_Select_Option';
}
objTheOption.className = 'DHTML_Select_Option_Clicked';
option_last_clicked = objTheOption;
}
else{
//only shift key present
for(var i = 0; i < objClickedOn.childNodes.length; i++){
var currNode = objClickedOn.childNodes.item(i);
currNode.className = 'DHTML_Select_Option';
}
var lastClickedOnPos = option_last_clicked.sourceIndex;
var thisClickedOnPos = objTheOption.sourceIndex;
if(lastClickedOnPos < thisClickedOnPos){
for(var i = lastClickedOnPos; i <= thisClickedOnPos; i++){
document.all[i].className = 'DHTML_Select_Option_Selected';
}
}
else{
for(var i = lastClickedOnPos; i <= thisClickedOnPos; i++){
document.all[i].className = 'DHTML_Select_Option_Selected';
}
}
objTheOption.className = 'DHTML_Select_Option_Clicked';
option_last_clicked = objTheOption;
}
}
else{
// only ctrl key present or ctrl and shift both present, ctrl to take precedence
option_last_clicked.className = 'DHTML_Select_Option_Selected';
objTheOption.className = 'DHTML_Select_Option_Clicked';
option_last_clicked = objTheOption;
}
}
//compile the value and write it out to the hidden field
var hidField = document.getElementById(strHiddenFieldID);
var strValueList = ''
for(var i = 0; i < objClickedOn.childNodes.length; i++){
var currNode = objClickedOn.childNodes.item(i);
if(currNode.className != 'DHTML_Select_Option'){
if(strValueList == ''){
strValueList = currNode.value;
}
else{
strValueList = strValueList + ';' + currNode.value;
}
}
}
hidField.value = strValueList;
}
</script>
</head>
<body>
<div class="DHTML_Select_Control" onselectstart="return false;" onclick="handleSelectClick(this, 'myhiddenfield'); return false; ">
<div class="DHTML_Select_Option" value="Option 1 value">Option 1 text is quite long</div>
<div class="DHTML_Select_Option" value="Option 2 value">Option 2 text is a little bit longer</div>
<div class="DHTML_Select_Option" value="Option 3 value">Option 3 text is really really really really long</div>
<div class="DHTML_Select_Option" value="Option 4 value">Option 4 text is absolutely, positively, without a doubt, the longest option here</div>
<div class="DHTML_Select_Option" value="Option 5 value">short option</div>
</div>
<!-- Change this to a hidden field or put it in a hidden div tag -->
<input type="text" id="myhiddenfield" value="">
</body>
</html>* Tested with IE6 under Win2K
Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.
- Thread starter
- #5
EdwardMartinIII
Technical User
Well, isn't the select widget as a rule a one-liner? Even in VB or Delphi, it's a one-liner. The flexible part is where it expands to cover whatever crazy text is in there (which begs the suggestion that you be a little more efficient at choosing the text that goes in).
Another option is temporarily changing the width of the drop-down. Like this:
Cheers,
![[monkey]](/data/assets/smilies/monkey.gif "[monkey] [monkey]")
Edward
"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door
Another option is temporarily changing the width of the drop-down. Like this:
Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<title>Sample File</title>
</head>
<body>
<p>Here are a variety of drop-downs. Click on each one to see your options:</p>
<form name="LilFormie">
<select name="Color1" id="Color1" width="60" style="width: 60px" onfocus="document.LilFormie.Color1.style.width='200px';return false;" onblur="document.LilFormie.Color1.style.width='60px';return false;">
<option value="red">red</option>
<option value="orange">orange</option>
<option value="yellow">yellow</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="indigo">indigo</option>
<option value="violet">violet</option>
<option value="feet">the same color as my feet</option>
</select>
<select name="Color2" id="Color2" width="60" style="width: 60px" onfocus="document.LilFormie.Color2.style.width='200px';return false;" onblur="document.LilFormie.Color2.style.width='60px';return false;">
<option value="red">red</option>
<option value="orange">orange</option>
<option value="yellow">yellow</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="indigo">indigo</option>
<option value="violet">violet</option>
<option value="feet">the same color as my feet</option>
</select>
<select name="Color3" id="Color3" width="60" style="width: 60px" onfocus="document.LilFormie.Color3.style.width='200px';return false;" onblur="document.LilFormie.Color3.style.width='60px';return false;">
<option value="red">red</option>
<option value="orange">orange</option>
<option value="yellow">yellow</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="indigo">indigo</option>
<option value="violet">violet</option>
<option value="feet">the same color as my feet</option>
</select>
<select name="Color4" id="Color4" width="60" style="width: 60px" onfocus="document.LilFormie.Color4.style.width='200px';return false;" onblur="document.LilFormie.Color4.style.width='60px';return false;">
<option value="red">red</option>
<option value="orange">orange</option>
<option value="yellow">yellow</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="indigo">indigo</option>
<option value="violet">violet</option>
<option value="feet">the same color as my feet</option>
</select>
<br /><br />
<input type="button" value="The Chosen Ones" onclick="var AlertString='The colors you chose are\n\n'+document.LilFormie.Color1.value+'\n'+document.LilFormie.Color2.value+'\n'+document.LilFormie.Color3.value+'\n'+document.LilFormie.Color4.value+'\n\nI hope you enjoy them.';alert(AlertString);return false;"></input>
</form>
<p>This works best when you tab around...</p>
</body>
</html>Cheers,
Edward "Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door
- Status
Similar threads
- Locked
- Question
- Locked
- Question
- Locked
- Question
- Locked
- Question