1

これは私が抱えている問題です：

ここに画像の説明を入力

選択の高さを入力の高さに合わせたいと思います。選択ui-btn-innerはパディングを持つクラスを使用し、変更すると選択の高さが変わります。

によって作成されたパディングは次のui-btn-innerとおりです。

ここに画像の説明を入力

これが私のコードです：

    <div class="ui-grid-a">
        <div class="ui-block-a" style="width: 80%;">
            <div data-role="content" class="accountTransferLabels" style="padding-left: 0;">
            Amount:
            </div>

            <input type="text" autocomplete="off" class="translate" placeholder="0.0" data-clear-btn="true" autofocus required autocorrect="off" autocapitalize="off" data-theme="d"/>

        </div>
        <div class="ui-block-b" style="width: 20%; padding-left: 15px;">
            <div data-role="content" class="accountTransferLabels" style="padding-left: 0;">
            Amount:
            </div>

            <select name="select-choice-1" id="select-choice-1" data-theme="a" style="height: 40%; padding: 0; margin: 0;">
                    <option value="" style="padding: 0;">CAD</option>
                    <option value="" style="padding: 0;"></option>
            </select>

        </div>
    </div>

どこに置いstyle="padding: 0;"てもパディングに影響しないことに注意してください。jQuery Mobile はコードを生成しますが、そのコードにクラスをアタッチできません。

私はjQueryの完全な初心者であり、この選択の高さを単純に変更する方法がわかりません..

4

1 に答える 1

1

あなたは明らかなことを見逃しています。

元の選択は表示されなくなります。また、ご覧のとおり、新しいものは <div> と <span> のカスタムの組み合わせです。新しいカスタム セレクト ボックスは、古いものから css を継承しません。これを機能させるには、新しい選択ボックスのCSS構造を変更する必要があります。

作業例: http://jsfiddle.net/Gajotres/PMrDn/107/

HTML:

<div class="ui-grid-a">
    <div class="ui-block-a" style="width: 80%;">
        <div data-role="content" class="accountTransferLabels" style="padding-left: 0;">
            Amount:
        </div>

        <input type="text" autocomplete="off" class="translate" placeholder="0.0" data-clear-btn="true" autofocus required autocorrect="off" autocapitalize="off" data-theme="d"/>

    </div>
    <div class="ui-block-b" style="width: 20%; padding-left: 15px;"  id="grid-container">
        <div data-role="content" class="accountTransferLabels" style="padding-left: 0;">
            Amount:
        </div>

        <select name="select-choice-1" id="select-choice-1" data-theme="a">
            <option value="" style="padding: 0;">CAD</option>
            <option value="" style="padding: 0;"></option>
        </select>

    </div>
</div>

CSS:

#grid-container .ui-select div span {
    padding-bottom: 0.14em  !important;
}

または、選択ボックスのテキストを完全に中央揃えにしたい場合は、次の例をご覧ください: http://jsfiddle.net/Gajotres/PMrDn/108/

CSS:

#grid-container .ui-select div span {
    padding-top: 0.2em  !important;
    padding-bottom: 0.2em  !important;
}

grid-containerグリッド コンテナーに与えられた id にすぎないため、この選択ボックスのみに影響を与えることができます。.ui-select を変更すると、すべての選択ボックスに影響します。

于 2013-09-09T13:35:08.107 に答える