How to change autocompleter widget size

Question

I tried the code from the project to change the size of the select box using <sj:autocompleter>:

<strong>Result Div :</strong>
<div id="formResult" class="result ui-widget-content ui-corner-all">Submit form bellow.</div>
<strong>Topics Div :</strong>
<div id="topics" class="result ui-widget-content ui-corner-all"></div>
<s:form id="form" action="echo" theme="simple" cssClass="yform">
    <fieldset>
        <legend>Select Box as Autocompleter</legend>
        <div class="type-select">
            <label for="echo">Echo: </label>
            <sj:autocompleter
                    id="customers"
                    name="echo"
                    list="%{customers}"
                    listValue="name"
                    listKey="id"
                    selectBox="true"
                    selectBoxIcon="true"
                    onChangeTopics="autocompleteChange"
                    onFocusTopics="autocompleteFocus"
                    onSelectTopics="autocompleteSelect"
                    cssStyle="width:100%;"
                    />
        </div>
        <div>
            <sj:submit
                    targets="formResult"
                    value="AJAX Submit"
                    indicator="indicator"
                    button="true"
                    />
            <img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>
        </div>
    </fieldset>
</s:form>

<br/>

but it doesn't work. I don't know what is the problem with this code.

Answer 1

Looking at generated HTML neither cssStyle nor cssClass of <sj:autocompleter> tag is set to actual input field. But you can use plain CSS to style this input field. Put your <sj:autocompleter> inside of some element to change only specific input then you can use something like that:

.type-select .s2j-combobox-input {
      width: 100%;
}

Where type-select is class of wrapper element and s2j-combobox-input is the class of generated input field for the <sj:autocompleter>.