Как изменить размер виджета autocompleter

-2

Я попробовал код из проекта, чтобы изменить размер поля выбора:Как изменить размер виджета 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/>

, но он не работает. Я не знаю, в чем проблема с этим кодом.

источник

2013-12-19 Roman C

Не думайте, что вы можете сделать это напрямую. Но с css что-то вроде этого выполнит задание '.type-select .s2j-combobox-input {width: 500px;}'. –

Это работает, если вы используете 'width: 100%! Important;'? Очевидно, для целей отладки. Если это сработает, другое правило переопределяет ваш (и поскольку это встроенный стиль, другой - '! Important' тоже). Класс 'type-select' также должен быть полезен вместе с сгенерированным HTML. –

'! Important' - это плохой хак, который заставляет механизм CSS браузера перерабатывать все правила для цели вашего селектора (в вашем случае, ваш объект, поскольку вы использовали встроенный стиль), установив это правило как наиболее важный. Он не должен использоваться в производстве (но это часто бывает), но является самым быстрым способом (вместе с firebug), чтобы увидеть, работает ли ваше правило, но переоценивается другим [с более высокой специфичностью] (http: // css-трюки .com/specificics-on-css-specificity /), или с '! important', или если ваше правило вообще не работает. –

Глядя на сгенерированный HTML-код, ни cssStyle, ни cssClass из <sj:autocompleter> тег установлен в фактическое поле ввода. Но вы можете использовать простой CSS для создания этого поля ввода. Поместите свой <sj:autocompleter> внутри какого-либо элемента, чтобы изменить только конкретный вклад, то вы можете использовать что-то вроде этого:

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

Где type-select является класс обертку элемента и s2j-combobox-input класс генерируемого поля ввода для <sj:autocompleter>.

источник

2013-12-19 17:31:21

Как изменить размер виджета autocompleter

ответ

Смежные вопросы