web-dev-qa-db-ja.com

HTMLのドロップダウンオプションのドロップダウン要素の幅を設定する

PHPスクリプトを使用して選択ボックスに自動的に入力するWebサイトで作業しています。これは、テキストボックスに入力するために使用するタイトルが非常に長いタイトルであるという問題を除き、すべて正常に機能します（ドロップダウンボックスは、画面の端からはみ出る最も長い要素の幅まで拡張されているため、スクロールバーにアクセスできません。ドロップダウンを手動で設定するさまざまな方法を試しました特定の幅にCSSを使用しているが、これまでのところ使用できません。選択ボックスを特定の幅に設定することで達成した最善の方法ですが、ドロップダウンメニュー自体は非常に広くなっています。

これに関するヒントは大歓迎です。

編集：

次のCSS行は、Google Chrome（これは私がページをテストしていたものです）を除くすべてのプライマリブラウザで機能することがわかりました。Chromeは既知であり、それは知っておくとよいでしょう。

select, option { width: __; }
htmlcsshtml-select
28
Greg Zwaagstra

optionセレクターを使用して、実際のアイテム自体にスタイルを設定できます（いくつかの制約はありますが）。

select, option { width: __; }

この方法では、ドロップダウンだけでなく、そのすべての要素も制限されます。

11
Josh Leitzel

長いドロップダウンボックスを処理する最良の方法は、固定幅のdivコンテナ内に配置し、selectタグでwidth：autoを使用することです。ほとんどのブラウザでは、div内にドロップダウンが含まれますが、クリックすると、オプション値全体が表示されるように展開されます。 IE Explorerでは動作しませんが、IEで常に必要な修正方法があります。コードは次のようになります。

[〜＃〜] html [〜＃〜]

<div class="dropdown_container">
  <select class="my_dropdown" id="my_dropdown">
    <option value="1">LONG OPTION</option>
    <option value="2">short</option>
  </select>
</div>

[〜＃〜] css [〜＃〜]

div.dropdown_container {
    width:10px;
}

select.my_dropdown {
    width:auto;
}

/*IE FIX */
select#my_dropdown {
    width:100%;
}

select:focus#my_dropdown {
    width:auto\9;
}
15
J.Money

HTML：

<select class="shortenedSelect">
    <option value="0" disabled>Please select an item</option>
    <option value="1">Item text goes in here but it is way too long to fit inside a select option that has a fixed width adding more</option>
</select>

CSS：

.shortenedSelect {
    max-width: 350px;
}

Javascript：

// Shorten select option text if it stretches beyond max-width of select element
$.each($('.shortenedSelect option'), function(key, optionElement) {
    var curText = $(optionElement).text();
    $(this).attr('title', curText);

    // Tip: parseInt('350px', 10) removes the 'px' by forcing parseInt to use a base ten numbering system.
    var lengthToShortenTo = Math.round(parseInt($(this).parent('select').css('max-width'), 10) / 7.3);

    if (curText.length > lengthToShortenTo) {
        $(this).text('... ' + curText.substring((curText.length - lengthToShortenTo), curText.length));
    }
});

// Show full name in tooltip after choosing an option
$('.shortenedSelect').change(function() {
    $(this).attr('title', ($(this).find('option:eq('+$(this).get(0).selectedIndex +')').attr('title')));
});

完全に動作します。私自身も同じ問題を抱えていました。このJSFiddleを確認してください http://jsfiddle.net/jNWS6/426/

2
Blak Dave

サーバー側：

  1. 文字列の最大長を定義する
  2. クリップ 文字列
  3. （オプション）水平の省略記号を追加します

代替ソリューション：選択要素は、あなたの場合（推測のみ）単一選択フォームコントロールであり、代わりにラジオボタンのグループを使用できます。これらは、より良いコントロールでスタイルできます。 select [@multiple]がある場合は、チェックボックスのグループを使用して同じことを行うことができます。それらは両方とも複数選択フォームコントロールとして表示できるためです。

1
anddoutoi

スモールアンドベストワン

#test{
width: 202px;
}
<select id="test" size="1" name="mrraja">
0
MRRaja