Wijmo Form Decorator下拉菜單和按鈕樣式問題

我們已經開始在我們的某個應用程序上使用Wijmo（基於jQuery UI & jQuery UI Theme Roller），但是在Wijmo Form Decorator樣式中存在下拉和按鈕問題。我看過Wijmo Docs但他們沒有幫助。Wijmo Form Decorator下拉菜單和按鈕樣式問題

我們已經啓動了腳本，但是在所有窗體上應用了樣式，我無法使下拉項與其他元素正確對齊。

的啓動腳本如下：

<script id="scriptInit" type="text/javascript"> 
    $(document).ready(function() { 
     $(":input[type='text'],:input[type='password'],textarea").wijtextbox(); 
     $("select").wijdropdown(); 
     $(":input[type='radio']").wijradio(); 
     $(":input[type='radio']").wijcheckbox(); 
     $("button").button(); 
    }); 
</script>

正如你會發現.button()和.wijdropdown()功能被應用到該標籤與一個類或ID的每個實例 - 我們與所有3個同樣的問題方法，並已經這樣走了，因爲這是整個應用程序所期望的。

你可以看到問題的屏幕截圖在這裏：

Screenshot of element alignment

我一直在使用Firebug，試圖找出是什麼問題，我懷疑它的一部分是Wijmo的select元素轉換到div並應用JS來啓用select功能。

我一直在使用Firebug和Chrome開發者工具來調試這個，我注意到在任何元素的上方或下方都沒有應用邊距。

我已經刪除了所有不是Wijmo或ThemeRoller但沒有更改的其他樣式表。我們正在使用Wijmo附帶的「火箭」主題。

每次我嘗試並操縱margin-top屬性時，它都重新對齊與上面直接搜索字段input內嵌的所有元素。

該窗體的HTML代碼是：

<FORM id="serialSearch" name="serial_search" method="POST" action="index.php"> 
    <label>Serial number: </label><input type="text" name="query" id="query" size="30" autocomplete="off" value="<? echo $serial_query; ?>" /> 
    <br /> 
    <select name="searchType"> 
     <option value="standard">Standard</option> 
     <option value="fuzzy">Fuzzy</option> 
    </select> 
    <button>Search serial numbers</button> 
    <input type="hidden" name="serial_submit" id="serial_submit" value="search_serials" /> 
</FORM>

爲我們提前得到正確對準這和欣賞任何建議，由於這是非常重要的。

來源

2012-02-10 Ryan

你需要用與比方說，一個類「輸入」和這種風格應用到div元素一個div裏面的所有形式的元素：

div.input { 
    display: inline-block; 
    vertical-align: top; 
}

here you can see a jsfiddle，顯示它的樣子。

作爲一個建議，下次創建jsfiddle不僅僅是一個截圖，因此它更容易讓人們和你測試你的代碼。

來源

2012-02-11 22:23:41 gigi

感謝您提供小提琴的提示，正如您將從我的個人資料中看到的，我不會問很多問題 - 我傾向於回答更多問題，因此我不認爲小提琴太多了......您的解決方案似乎工作得很好，只是每個元素都需要被包裝起來，一讀我沒有得到，但後來重新檢查你的小提琴 - 多麼痛苦！噢，謝謝你的幫助 - 我很感激！ – Ryan 2012-02-12 23:50:13

我知道把它們包裝在div上是一件很痛苦的事情，但如果你需要偶然的設計你只需要改變CSS而不是html，它也是一個很好的設計選擇。 – gigi 2012-02-13 08:42:21

Wijmo Form Decorator下拉菜單和按鈕樣式問題

回答

相關問題