Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    215
    Thanks
    14
    Thanked 0 Times in 0 Posts

    expanding dropdown/select box???

    Hello all. Not sure if this is the correct forum, but here it goes. I was just wondering if anyone out there knows of a way to have a dropdown/select box set to a fixed width i.e. 125px, but when you open it, the dropdown portion will automatically expand to the largest item in the list, and when you select the item, have the dropdown resize back to the 125px size?

    Thanks in advance,

    Parallon

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    The sunny side of the Alps
    Posts
    230
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The solution to your problem is somewhat in the following direction (combination of server and client scripting):
    Code:
    <select name="select" 
         style="width:125px;" 
         onclick="this.style.width='<% = maxOptionWidth %>px';" 
         onblur="this.style.width='125px';">
    maxOptionWidth is a variable that holds the width of the longest text in select control - you have to determine the width by yourself when building the values - I don't know whether there is a built-in function that would return character width in ASP (similar to Printer.TextWidth in VB6).

    Hope this helps.
    Last edited by bostjank; 01-03-2007 at 02:13 PM.

  • #3
    Regular Coder
    Join Date
    May 2005
    Posts
    215
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Thank you. I'll give that a try!

    Parallon

  • #4
    Senior Coder
    Join Date
    Nov 2002
    Location
    North-East, UK
    Posts
    1,265
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <form name="form1" method="post" action="">
      <select name="select" style="width: 100px;" onmousedown="this.style.width=''" onblur="this.style.width='100px'">
      <option>item</option>
        <option value="item1">This is item1 this is more text</option>
    	<option>item</option>
      </select>
    </form>

  • #5
    Regular Coder
    Join Date
    May 2005
    Posts
    215
    Thanks
    14
    Thanked 0 Times in 0 Posts
    That was AWESOME and worked great!

    Thank you so much. Actually, thank you both.

    Parallon


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •