Forum:

HTML Pages with CSS and JavaScript

Dynamic width of s:select

Ranch Hand

Posts: 183

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi,

Can I make an s:select list to have a static width to have the following properties

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.

Thanks !!
JD

Amit Ghorpade

Bartender

Posts: 2856

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

"J D " please check your private messages for an important administrative matter. You can see them by clicking the My Private Messages link above.

SCJP, SCWCD.
|Asking Good Questions|

Jay Abrahm

Ranch Hand

Posts: 183

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi,

To be a bit more descriptive -
<td>
<s:select name="" label="" theme="simple" list="" cssStyle="width:20px;"
value="" id="">
</s:select>
</td>

So as you see it has a standard width but can I get the select list to increase width based when I click on the drop down.

Bear Bibeault

Sheriff

Posts: 67699

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

What is <s:select>? It's not a standard tag.

In any case, you can only affect the <select> element via it's HTML attributes and CSS, so this has been moved to the HTML forum.
[ December 07, 2008: Message edited by: Bear Bibeault ]

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Jay Abrahm

Ranch Hand

Posts: 183

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

I tried the following javascript but it does not reset the width to 20 px once the combo is set
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" onKlick="autoWidth();">
</s:select>

Bear Bibeault

Sheriff

Posts: 67699

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Please be sure to use UBB code tags when posting code to the forums. Unformatted code is extremely hard to read and many people that might be able to help you will just move along to posts that are easier to read. Please read this for more information.

You can go back and change your post to add code tags by clicking the .

[Asking smart questions] [About Bear] [Books by Bear]

Sri Anand

Ranch Hand

Posts: 392

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I think width of the select tag depends mostly on the length of the text in your options list

Jay Abrahm

Ranch Hand

Posts: 183

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi Sri Anand -

That is what happens but the length goes all the way to 100 characters and I don't want a list that wide. Whereas if I set the width to 20 (which is all the space I have) the combo box gets clipped of.

I remember seeing websites where the dropdown is wider and then when the selection is made it narrows down but I don't seem to be lucky enough to find one now.

I even played around with trying to get a dynamic tooltip that would display the whole text, but that was a dead end as far as I know.

Sri Anand

Ranch Hand

Posts: 392

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I had a similar issue i could not get above this problem,
Issue
display seven long meesages in drop down and user needs to select one of them there were lot of fields in teh form and page lay out was messing up because of length of select
solution or work around
i numbered each message and below the select, i put a multi line text box and when ever a particular number is selected in select, the corresponding message of the number is displayed in the text box, thus keeping the size of the select small

its kind of work around i did to get above this problem if you are sucessful in finding better solution let me know

Jay Abrahm

Ranch Hand

Posts: 183

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hey !!

Just what I have started with... I don't know of a better workaround, all that I need to make up my mind on now is whether, to have text in a div as label or have a textarea...

I am hoping to find a better solution...

Thanks for your inputs !!

Jay Abrahm

Ranch Hand

Posts: 183

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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. onclickk="dynamicWidth(true,20);" onblurr="dynamicWidth(false,20);" onchangee="dynamicWidth(false,20);"
* 2. onfocuss="dynamicWidth(true,20);" onblurr="dynamicWidth(false,20);" onchangee="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" onclickk="dynamicWidth(true,20);" onblurr="dynamicWidth(false,20);" onchangee="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>

Facun Fernetn

Greenhorn

Posts: 1

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi Jay Abrahm!
Thanks for the source code you post above. I've been testing it and I found that this doesn't work in IE7 or IE8, but it works fine in Firefox, do you know why ? I need this solution for IE7 or IE8...
Thanks in advance ! Regards !

You can thank my dental hygienist for my untimely aliveness. So tiny:

The Low Tech Laboratory Movie Kickstarter is LIVE NOW!

https://www.kickstarter.com/projects/paulwheaton/low-tech