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!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

drop down box size 1

Status
Not open for further replies.
Jami

Jami

Programmer
Jul 18, 2000
54
US
Is there a way to maninpulate the size of a drop down box to maintain the size regardless of the values populating the box? Values are being selected from a database that users can edit and add to and some values are getting so long that it is breaking or lengthening the web form. Can I set the size on these select boxes?
Thanks!
 
Sort by date Sort by votes
Thanks Adam,
I am also wondering then if there is any way to still view any truncated strings while setting the size should they not fit the new length. Or, is there any way to place a single drop down value on multiple lines?
Thanks again!
 
Upvote 0 Downvote
You could display the value in a span when they select one.

<select style=&quot;width:200px&quot; onchange=&quot;document.getElementById('preview').innerText=this[this.selectedIndex].text&quot;>
<option value=&quot;1&quot;>One
<option value=&quot;2&quot;>Two
</select>
<span id=&quot;preview&quot;></span>
 
Upvote 0 Downvote
Or you could create your own select box that allows the wrapping of text.

<html>
<head>
<style>
.customSelect{
border: inset;
font-family: MS Sans Serif;
font-size: 80%;
width: 200px;
cursor: default;
}
</style>
<script>
function toggleHighlight(div,sel,num){
option=document.f[sel][num]
div.style.color=(option.selected ? 'black':'highlighttext');
div.style.backgroundColor=(option.selected ? 'white':'highlight');
option.selected=!option.selected;
}
</script>
</head>
<body>
<form name=&quot;f&quot;>
<span class=&quot;customSelect&quot;>
<div style=&quot;width:100%&quot; onclick=&quot;toggleHighlight(this,'myselect',0)&quot; onselectstart=&quot;return false&quot;>Option 1</div>
<div style=&quot;width:100%&quot; onclick=&quot;toggleHighlight(this,'myselect',1)&quot; onselectstart=&quot;return false&quot;>Option 2</div>
<div style=&quot;width:100%&quot; onclick=&quot;toggleHighlight(this,'myselect',2)&quot; onselectstart=&quot;return false&quot;>Option wrapping text wrapping text wrapping text wrapping text</div>
</span>
<select name=&quot;myselect&quot; multiple style=&quot;display:none&quot;>
<option value=&quot;Value 1&quot;>
<option value=&quot;Value 2&quot;>
<option value=&quot;Value 3&quot;>
</select>
<input type=&quot;submit&quot;>
</form>
</body>
</html>
 
Upvote 0 Downvote
Another thing that might work for you is to have the width of the drop-down set until it's selected, then it expands to cover the elements within.

I know I had this code posted in an earlier note, but I can't seem to find it, so here it is again:

Code: 
<!DOCTYPE html 
     PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
     &quot;DTD/xhtml1-transitional.dtd&quot;>
<html>
  <head>
    <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;></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=&quot;LilFormie&quot;>
      <select name=&quot;Color1&quot; id=&quot;Color1&quot; width=&quot;60&quot; style=&quot;width: 60px&quot; onfocus=&quot;document.LilFormie.Color1.style.width='200px';return false;&quot; onblur=&quot;document.LilFormie.Color1.style.width='60px';return false;&quot;>
        <option value=&quot;red&quot;>red</option>
        <option value=&quot;orange&quot;>orange</option>
        <option value=&quot;yellow&quot;>yellow</option>
        <option value=&quot;green&quot;>green</option>
        <option value=&quot;blue&quot;>blue</option>
        <option value=&quot;indigo&quot;>indigo</option>
        <option value=&quot;violet&quot;>violet</option>
        <option value=&quot;feet&quot;>the same color as my feet</option>
      </select>
      <select name=&quot;Color2&quot; id=&quot;Color2&quot; width=&quot;60&quot; style=&quot;width: 60px&quot; onfocus=&quot;document.LilFormie.Color2.style.width='200px';return false;&quot; onblur=&quot;document.LilFormie.Color2.style.width='60px';return false;&quot;>
        <option value=&quot;red&quot;>red</option>
        <option value=&quot;orange&quot;>orange</option>
        <option value=&quot;yellow&quot;>yellow</option>
        <option value=&quot;green&quot;>green</option>
        <option value=&quot;blue&quot;>blue</option>
        <option value=&quot;indigo&quot;>indigo</option>
        <option value=&quot;violet&quot;>violet</option>
        <option value=&quot;feet&quot;>the same color as my feet</option>
      </select>
      <select name=&quot;Color3&quot; id=&quot;Color3&quot; width=&quot;60&quot; style=&quot;width: 60px&quot; onfocus=&quot;document.LilFormie.Color3.style.width='200px';return false;&quot; onblur=&quot;document.LilFormie.Color3.style.width='60px';return false;&quot;>
        <option value=&quot;red&quot;>red</option>
        <option value=&quot;orange&quot;>orange</option>
        <option value=&quot;yellow&quot;>yellow</option>
        <option value=&quot;green&quot;>green</option>
        <option value=&quot;blue&quot;>blue</option>
        <option value=&quot;indigo&quot;>indigo</option>
        <option value=&quot;violet&quot;>violet</option>
        <option value=&quot;feet&quot;>the same color as my feet</option>
      </select>
      <select name=&quot;Color4&quot; id=&quot;Color4&quot; width=&quot;60&quot; style=&quot;width: 60px&quot; onfocus=&quot;document.LilFormie.Color4.style.width='200px';return false;&quot; onblur=&quot;document.LilFormie.Color4.style.width='60px';return false;&quot;>
        <option value=&quot;red&quot;>red</option>
        <option value=&quot;orange&quot;>orange</option>
        <option value=&quot;yellow&quot;>yellow</option>
        <option value=&quot;green&quot;>green</option>
        <option value=&quot;blue&quot;>blue</option>
        <option value=&quot;indigo&quot;>indigo</option>
        <option value=&quot;violet&quot;>violet</option>
        <option value=&quot;feet&quot;>the same color as my feet</option>
      </select>
      <br /><br />
      <input type=&quot;button&quot; value=&quot;The Chosen Ones&quot; onclick=&quot;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;&quot;></input>
    </form>
    <p>This works best when you tab around...</p>
  </body>
</html>

Hope that helps!

Cheers,


[monkey] Edward [monkey]

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

nanbread
  • Locked
  • Question
Sweeping drop-down menus
Replies
0
Views
231
nanbread
nanbread
TheLazyPig
  • Locked
  • Question
Dropdown (option) using Anguarjs
Replies
0
Views
242
TheLazyPig
TheLazyPig
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
103
chikwendu
chikwendu
edd92
  • Locked
  • Question
Dropzone Issues
Replies
0
Views
102
edd92
edd92
berkshirea
  • Locked
  • Question
Dropdown, Select, Required 1
Replies
8
Views
167
berkshirea
berkshirea

Part and Inventory Search

Sponsor

Back
Top