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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamically set the width of drop down list

    Hi,
    How can i set the width of a drop down list dynamically ie. to the length of the selected option.

    Thanks in advance.

  • #2
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    If you're referring to selects, they automatically size to the width of the largest option (if void of style attributes). This also applies to dynamically inserted options.

    Example:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Example</title>
    <style type="text/css">
    </style>
    <script type="text/javascript">
    // <![CDATA[
    
    function addOption()
    	{
    	var sel = document.getElementsByTagName("select")[0];
    	var new_opt = document.createElement("option");
    	new_opt.innerHTML = "loooooooooooong";
    	sel.appendChild(new_opt);
    	}
    
    // ]]>
    </script>
    </head>
    <body>
    
    <select>
    	<option>short</option>
    </select>
    
    <br /><br />
    <input type="button" value="click me" onclick="addOption()" />
    
    </body>
    </html>
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com


  •  

    Posting Permissions

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