1

On an android tablet, using Chrome, I'm showing a custom web page. In it I have some dropdown controls (HTML5 SELECT). With these controls I'm trying to display more HTML OPTION elements by reducing their displayed size. I'm not having success with my effort. On my 7-inch tablet the options always show up with only about 12 elements filling the display (held in portrait mode).

For example, use this CSS:

#distDV {
    font-size: 8pt;
    border-color: #999999;
}

#distDV option {
    font-size: 8pt;
    border-color: #999999;
}

with this HTML:

<select id="distDV">
      <option value="30">+30</option>
      <option value="29">+29</option>
</select>

On a desktop computer (using Chrome v. 25 or later) the select drop-down displays in the smaller, requested font. When I click on the control to show the values the options also are in a tiny font.

On my android tablet (using Chrome v. 25 or later) the select drop-down displays in the smaller, requested font. When I click on the control to select a value the options are shown by the android device in a standard option select, full-screen, using about 12 lines top-to-bottom on my 7-inch display. I'm trying to make this maybe 16 lines, doing this through CSS.

I'm looking for ideas. Yes, I already tried using an optgroup, to no effect.

Thank in advance, Jerome.

4

1 に答える 1

1

お気づきのように、オプション選択ダイアログのフォント サイズを変更することは不可能です。これは非常に使いやすい理由によるものです。一度に表示されるオプションを増やす必要がある理由はありますか? ダイアログのスクロールがニーズに合わないのはなぜですか? また、オプションを小さくしすぎると、ユーザーをイライラさせる可能性があることにも注意してください。あなたはオプションを正確に選択できるかもしれませんが、他の人はできないかもしれません。

これらの制限を回避するには、おそらくラジオ ボタンを使用して、独自のダイアログをコーディングします。例えば：

<input type="radio" id="distDV30" name="distDV" value="30"><label for="distDV30">+30</label>
<input type="radio" id="distDV29" name="distDV" value="29"><label for="distDV29">+29</label>

その後、好きなようにスタイルを設定できます。もう 1 つのオプションは、入力ボックスを使用することです。これは、すべてのオプションが数値である場合により適切な場合があります。例えば。：

<input type="number" name="distDV" min="1" max="30">
于 2013-09-05T12:56:20.980 に答える