如何改變autocompleter插件大小

-2

<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'）。 class'type-select'也應該與生成的HTML一起使用。 –

'！important'是一個不好的破解，它強制瀏覽器的CSS引擎重新處理所有選擇器目標的規則（在你的案例中，你的對象，因爲你使用了內聯風格），通過設置該規則爲最重要。它不應該用於生產（但通常是這樣），但它是最快的方式（與螢火蟲一起），以查看您的規則是否有效，但是正在被另一個規則覆蓋（具有更高的特異性）（http：// css-tricks .com/specifics-on-css-specificity /），或用'！important'，或者如果你的規則根本不起作用。 –

綜觀生成的HTML既不cssStyle也不<sj:autocompleter>標籤的cssClass被設定爲實際的輸入字段。但是你可以使用普通的CSS來設置這個輸入字段的樣式。把你的<sj:autocompleter>裏面的一些元素的改變只有特定的輸入，那麼你可以使用類似的東西：

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

哪裏type-select是一流的包裝元素和s2j-combobox-input的是類生成的輸入字段爲<sj:autocompleter>。

來源

2013-12-19 17:31:21

如何改變autocompleter插件大小

回答

相關問題