0

アプリケーションの1つでWijmo （jQueryUIとjQueryUIテーマローラーに基づく）の使用を開始しましたが、Wijmoフォームデコレーターのスタイルのドロップダウンとボタンに問題があります。

Wijmo Docsを見たことがありますが、役に立ちませんでした。

スクリプトを開始し、スタイルを適用しましたが、すべてのフォームでドロップダウンアイテムを他の要素と正しく整列させることができません。

開始スクリプトは次のとおりです。

<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()および関数がクラスまたはIDではなくタグの各インスタンスに適用されていることに気付くと思いますが.wijdropdown()、3つのメソッドすべてで同じ問題が発生し、アプリケーション全体で必要とされるため、このようになりました。

ここで問題のスクリーンショットを見ることができます：

要素の配置のスクリーンショット

私はFirebugを使用して問題を解決しようとしていますが、その一部は、Wijmoがselect要素をに変換し、 divJSを適用して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>

事前に感謝し、これを正しく調整し、提案に感謝することは私たちにとって非常に重要です。

4

1 に答える 1

0

すべてのフォーム要素をdiv内でラップし、たとえばクラス「input」を使用して、このスタイルをdiv要素に適用する必要があります。

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

ここでは、それがどのように見えるかを示すjsfiddleを見ることができます。

提案として、次回はスクリーンショットよりもjsfiddleを作成して、人々とあなたがコードをテストしやすくします。

于 2012-02-11T22:23:41.003 に答える