ドロップダウンメニューの幅が広すぎるため、メニューの幅を拡張することができない場合、どのようなオプションがありますか？つまり、ページレイアウトが壊れてしまったり、ドロップダウンが長尺アイテムに合うように調整されているとあまりにも醜いように見えます。大きすぎるドロップダウンメニュー項目の推奨事項
切り捨て？ トランケーション+フルホバーテキスト？ 長いアイテムは許可しないでください。
誰もがこれに対する優雅な解決策を見つけましたか？
ありがとうございました。
私はGordonBにオプションの切り捨てについて同意します。余分に長いオプションは読みにくく、あなたが言ったようにそれはひどいです。
ただし、ユーザーの入力からプルダウンが設定されている場合は、その長さを制限します。 15単語で言うことができる5と言わなければならない...それができない場合は、おそらくドロップダウンはあなたの最良の選択肢ではありません。
たとえば、あなたのオプションが研究論文とその著者のタイトルである場合、それらをおそらくいくつかのキーワードに短縮することができます（ "String Theory and You [Brown 2008]"）。一方、オプションそのものが数語だけ違っていて、切り詰められていると意味がなくなった場合（例えば、「ピーナッツバターとブドウゼリーサンドイッチ、ニンジンスティックと豆乳」、「ピーナッツバターとボイセンベリーゼリーニンジンスティックと2％ミルクとのサンドイッチ）は、すべてのオプションを順番に表示し、必要に応じてチェックボックスやラジオボタンを表示することで、より効果的になるかもしれません。
を（あなたは基本的に私が代わりにDropDownListコントロールのリピータを使用して言って、ASP.NETを使用している場合）、この第二のアプローチはまた、あなたがすることができないであろう他の要素を組み込むことが可能かもしれませんドロップダウンで。アイデアはthis Amazon search result pageをご覧ください。
< >ではなく、<div>を使用して実装されている商用ASP.NETコントロールを使用しています。このようにして、複数の要素を配置し、必要に応じてスタイルを設定したり、他の処理を行うことができます。
ツールチップとの切り捨ては私の選択になります....
私は金持ちかなりUIたtelerikコントロールを使用することをしなければならなかった最後の時間。
ほとんどのブラウザでは、ドロップダウンの実際の幅にかかわらず、IEが選択ボックスの幅に合わせてそれらを切り抜きます。したがって、問題は実際にはブラウザ固有のものです。
私はレイアウトを壊さずにIEのホバー上の幅を広げることができるように、ドロップダウンで絶対配置を使用するソリューションを作成しました。少しハッキーですが、それは一つの選択肢です。
あなたが話している幅、文脈に依存します。多くの場合、これはコーディングの問題ではなく、設計上の問題になります。テキストが本当に長い場合、ドロップダウンで長いテキストを読むのは難しいので、ユーザビリティの問題はありません。私の選択肢は：
ドロップダウンが本当に狭く、最長の項目がそれほど長くない場合（たとえば3〜4ワード）、それに対応するようにデザインを変更してください。
テキストが本当に長い場合（たとえば文）、できればそれを切り捨てます。時には、テキストがこれに従わない場合もあります（例えば、同じテキストを持つ複数のアイテムで終わるかもしれません）。あなたは本当に選択リスト項目にツールチップを置くことはできません。
テキストが実際に長くて切り捨てられない場合は、別のUIオプションを検討するとよいでしょう。
CSS property max-widthで要素の最大幅を指定します。
私はこの質問にかなり遅れていることを認識していますが、私は答えを探していて、かなりエレガントな解決策を見つけたかもしれません。
はこちらをご覧：
第2のリンクに基づいたソリューションを推奨する前に、ソリューションのカップルについての最初のリンクの話を。
クリックすると、<select>タグの幅を変更して、オプションの全文を表示するのに十分な大きさになるようにします。 <select>タグをオーバーフローのあるdiv内に「非表示」に設定することで、ページの残りの部分とぶつかりません。
試してみてください。これはかなり良い解決策です。
その2番目のリンクからの解決策は私のためにうまくいった。 IE8で正しく機能するには、onBlur属性を省略する必要があると付け加えます。 – techpeace
2番目のリンクの提案は、onBlurを削除することなくIE8で機能しました。 –
長いフィールドに基づく計算フィールドを作成しないでください。 最初の50文字だけを作成してください。
= LEFT（[タイトル]、50）
次にドロップダウンそのフィールドを参照します。
ありがとうございます！ドロップダウンのテキストはユーザー入力からのものなので、いくつかの洞察力がないので、切り捨てや長さの制限を使うかのように見えます。 – ntownsend