PDA

View Full Version : Dynamic width of s:select



Java Developer
12-09-2008, 04:32 AM
Hi,

taglib prefix="s" uri="/struts-tags"

<s:select list="" cssStyle="width:20px;" id="">
</s:select>

Can I make an s:select list that has static width behave based on the data as follows :

1. When the dropdown is selected, it dynamically increases based on the largest text in the list
2. When selected the list goes back to the static width (hiding text if needed).

Well I started with looking at struts but I realized that it was a dead end.

Started two routes as far as javascript is concerned...

1. Tried getting dynamic tooltip to display the whole text. Wasn't too successful at this.

2. Something that nearly worked was to dynamically increase the width when the drop down is selected but i wasn't able to get it back to the original width after the selection was made
function autoWidth()
{
var maxlength = 0;
var mySelect = document.getElementById('test');
for (var i=0; i<mySelect.options.length;i++)
{
if (mySelect[i].text.length>maxlength)
{
maxlength = mySelect[i].text.length;
}
}
mySelect.style.width = maxlength * 10;
}

<s:select list="" cssStyle="width:20px;" id="test" onClick="autoWidth();">
</s:select>

Java Developer
12-11-2008, 05:10 AM
Hi,

This issue is now resolved. I had posted my issue in http://www.webdeveloper.com/ to get the solution.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/* This function is to enable dynamic width of the select box.
* This method can be called on two ways based on the users need of
* 1. If they want to have the expanded text box till they move to the next field
* 2. If they want the default size to be set once the selection is made
* The settings are -
* 1. onclick="dynamicWidth(true,20);" onblur="dynamicWidth(false,20);" onchange="dynamicWidth(false,20);"
* 2. onfocus="dynamicWidth(true,20);" onblur="dynamicWidth(false,20);" onchange="dynamicWidth(false,20);"
*/
function dynamicWidth(evt,conversionFactor){
var selection = document.getElementById('test');
if (!selection.minmax){
selection.minmax=[parseInt(selection.style.width),0];
for (var i=0; i<selection.options.length;i++){
if (selection[i].text.length>selection.minmax[1]){
selection.minmax[1] = selection[i].text.length*conversionFactor;
}
}
}
selection.style.width = (evt?selection.minmax[1]:selection.minmax[0])+'px';
}

</script></head>

<body>
<select id="test" onclick="dynamicWidth(true,20);" onblur="dynamicWidth(false,20);" onchange="dynamicWidth(false,20);" style="width:50px;" >
<option >Option one</option>
<option >Option two which is long</option>
<option >Option three which is longer</option>
<option >Option four which is even more long</option>
</select>
</body>

</html>