/    Sign up×
Community /Pin to ProfileBookmark

Dynamic width of s:select

Copy linkTweet thisAlerts:
Dec 09.2008

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>

    to post a comment
    JavaScript

    6 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @vwphillipsDec 09.2008 — [CODE]<!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">
    /*<![CDATA[*/
    function autoWidth(evt){
    var maxlength = 0;
    var mySelect = document.getElementById('test');
    if (!mySelect.minmax){
    mySelect.minmax=[parseInt(mySelect.style.width),0];
    for (var i=0; i<mySelect.options.length;i++){
    if (mySelect[i].text.length>mySelect.minmax[1]){
    mySelect.minmax[1] = mySelect[i].text.length*10;
    }
    }
    }
    mySelect.style.width = (evt?mySelect.minmax[1]:mySelect.minmax[0])+'px';
    }

    /*]]>*/
    </script></head>

    <body>
    <select id="test" onfocus="autoWidth(true);" onfocus="autoWidth(1);" onblur="autoWidth(false);" onchange="autoWidth(false);" style="width:50px;" >
    <option >This is Some Text</option>
    <option >This is Some Text</option>
    <option >This is Some Text</option>
    <option >This is Some Text</option>
    </select>
    </body>

    </html>[/CODE]
    Copy linkTweet thisAlerts:
    @J_DauthorDec 09.2008 — Thanks for your help. I might need a few hours before I can try this out. My system needs a cleanup. But just a quick question before that :

    Is the onfocus="autoWidth(true);" onfocus="autoWidth(1);" by mistake...
    Copy linkTweet thisAlerts:
    @J_DauthorDec 10.2008 — Thank you !!! The only issue is that

    mySelect.minmax[1] = mySelect[i].text.length*10;



    *10 conversion does not work for longer text. I think the relation is logarithmic so I passed one more parameter.



    function floatingWidth(evt, conversionFactor)

    mySelect.minmax[1] = mySelect[i].text.length*conversionFactor;



    so that different calls can have different factor based on the max length needed.



    Do you know of a better fix ?



    Thanks again.
    Copy linkTweet thisAlerts:
    @J_DauthorDec 10.2008 — One more thing that I noticed. Once the selection is made and the select returns to the default size. The dynamic width does not increase if I click on the combo unless we click elsewhere so that the focus is out of the select list.
    Copy linkTweet thisAlerts:
    @vwphillipsDec 10.2008 — so that different calls can have different factor based on the max length needed.[/QUOTE]

    you could pass a specific width.

    The dynamic width does not increase if I click on the combo unless we click elsewhere so that the focus is out of the select list.[/QUOTE]

    It is because the select still has focus, if you use on click to open the select the onchage will not close the select
    Copy linkTweet thisAlerts:
    @J_DauthorDec 11.2008 — Thanks a lot for your help Vic.

    Everyone seems to be happy now. I showed all the stakeholders both the options

    onclick="autoWidth(true,20);" onblur="autoWidth(false,20);" onchange="autoWidth(false,20);"

    onfocus="autoWidth(true,20);" onblur="autoWidth(false,20);" onchange="autoWidth(false,20);"

    And they liked the first option better since they wanted to continue changing the selection till they make up their mind and they wanted the select to come back to the default size once they move to the next input field. I prefer to have it the way you send me the code but then I don't care...

    Again, thanks for your help.
    ×

    Success!

    Help @J_D spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...