i have an dropdown like this:
<select id="cbvms" name="cbvms" class="SelectList">
<?php
foreach($vm_array as $key => $value)
{
if(strcmp($vmguid,$key) == 0)
echo "<option value=\"".$key."\" selected=\"".$value."\">".$value."</option>";
else
//echo "<option value=\"".$key."\">".$value."</option>";
echo "<option value=\"".$key."\" title=\"".$value."\">".$value."</option>";
}
?>
</select>
and in my database i have an option value like this ....
VM name:
172.125.4.186
172.125.4.101
172.125.4.194
172.125.4.126
172.125.4.167
172.125.4.102
172.125.4.171
172.125.4.118
172.125.4.169
Microsoft Windows Server 2003 Enterprise x64 Edition 5.2.3790 xen - 121 - centos 5.4 - ip 101
salman
saman
172.125.4.198
172.125.4.200
172.125.4.189
172.125.4.191
now i want when some one select any option value as shown as above my dropdown autosize
for example: when user select 172.125.4.169 then its fit on the size of dropdown, or when the user select "Microsoft Windows Server 2003 Enterprise x64 Edition 5.2.3790 xen - 121 - centos 5.4 - ip 101" then its also fit on the dropdown.
Right now if the VM name is long, the drop down field for Select VM goes out of range....
u need to use jquery for this
if ($.browser.msie) $('select.SelectList')
.bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
.bind('click', function() { $(this).toggleClass('clicked'); })
.bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
.bind('blur', function() { $(this).removeClass('expand clicked'); });
CSS:
select {
width: 120px; /* Or whatever width you want. */
}
select.expand {
width: auto;
}
All you need to do is to add the class SelectList to the dropdown element(s) in question.
<select id="cbvms" name="cbvms" class="SelectList">
<?php
foreach($vm_array as $key => $value)
{
if(strcmp($vmguid,$key) == 0)
echo "<option value=\"".$key."\" selected>".$value."</option>";
else
echo "<option value=\"".$key."\" title=\"".$value."\">".$value."</option>";
}
?>
</select>
use this
<select id="cbvms" name="cbvms" class="SelectList" style="width:120px;">
I'm afraid form controls are notoriously difficult to style. Even if you do something dynamically with JavaScript, you would have to put a lot of work in to make it consistent across browsers. If your user base is narrow enough, you could play around with things like the overflow or min-width properties and see what they do on your browser of choice. Some have browser-specific rules, or have hidden elements inside that have different effects than their containers.
I know that doesn't help much. Sorry.