RSS

Show Long Text In The Dropdown List Of Fixed Size

16 May
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Dropdown text show</title>
    <script>
var spacer = null;
var curObj = null;
function openIt(obj)
{
      if(spacer) return;
      spacer = document.createElement("span");
      spacer.style.width = obj.offsetWidth;
      spacer.style.height = obj.offsetHeight;
      spacer.style.display = "none";
      obj.parentNode.insertBefore(spacer, obj);
      

      obj.style.left  = getAbsPos(obj, "Left");
      obj.style.top  = getAbsPos(obj, "Top");
      obj.style.position  = "absolute";
      obj.style.width = obj.scrollWidth;
      obj.focus();
      spacer.style.display = "inline";
      curObj = obj;
     



}
function closeIt()
{
      if(spacer)
      {
            spacer.parentNode.removeChild(spacer);
            spacer = null;
      }
      if(curObj)
      {
            curObj.style.width = "100px";
            curObj.style.position  = "static";
      }
}
function getAbsPos(o,p){var i=0;while(o!=null){i+=o["offset"+p];o=o.offsetParent;}return i;}
</script>
</head>
<body>
    <table>
        <tr>
            <td bgcolor="#336600" style="width: 200px">
            <select style="width:100px" onmouseenter="openIt(this)" onchange="closeIt()" onblur="closeIt()">
                  <option>please select
                  <option>My problem is that the column is not wide enough to display the contents in the drop-down list.
                  <option>Something else
            </select>
            </td>
            <td bgcolor="#00ff33" style="width: 100px">
               </td>
            <td style="width: 100px">
            </td>
        </tr>
        <tr>
            <td style="width: 100px">
            </td>
            <td style="width: 100px">
            </td>
            <td style="width: 100px">
            </td>
        </tr>
        <tr>
            <td style="width: 100px">
            </td>
            <td style="width: 100px">
            </td>
            <td style="width: 100px">
            </td>
        </tr>
    </table>


</body>
</html>


Image
Advertisements
 
Leave a comment

Posted by on May 16, 2013 in Uncategorized

 

Tags: , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: