Yuna's Tedious Talk

日々思ったことをつらつらと書いてます。


セレクトメニュー(プルダウン形式)の罠。

またまたIEでの困ったちゃん現象です。
最近仕事中でもこういった困ったちゃん現象に悩まされております。
ウガー。[:イヤン:]

今日ぶち当たった問題は、私が担当していた仕事ではないんだけど、とあるサイトの制作で、検索画面を作っていた時の話です。

その検索フォームはデザイン上、検索項目が一列になっていて、日時、場所、などを検索してその検索結果を次の画面に渡すというもの。日時・場所などはプルダウンにしてユーザーに選ばせるスタイルだったのですが、この場所がクセモノでして、選択肢にある項目名がたまにチョー長かったりするわけです。そうなるとデフォルトだとプルダウンの横幅がイチバン長い項目に合わせてひろがってしまうので、スタイルシートでプルダウンの幅を指定することになるわけですが…。



IEだと、スタイルシートで幅指定をした際、下にびにょ〜んとのびるプルダウン選択肢の幅までもがそのプルダウン幅に合わせてちょんぎれてしまうため、長い文字列が切れてしまうんですね。
▼参考画面
IEだとプルダウンの幅とリスト幅がそろってしまう。
08022801.jpg

見て頂くとわかるんですが、FirefoxやOperaなどで見ると、ちゃんと閉じた状態のプルダウン幅のみがスタイルシートの指定にそって反映されており、下にのびる選択肢の幅は、イチバン長い項目に合わせて広がっています。イチバン理想的な状態。とてもわかりやすい。
んがしかし、IEだとどうにもこうにも、何を選択したらいいのかわからない状態になってしまう。

んな、デザイン上とかいって項目一列にするからそうなるんじゃない?
デザインは関係なくして、項目を二列以上にしてプルダウンの幅とか
指定しなきゃいいじゃ〜ん♪


って意見はごもっともでございますが…。w
クライアントの希望とか色々考慮するとね、そうも行かない場合があったりと…、制作メンバーのほうでは試行錯誤して、一生懸命ガンバルわけなのであります。なんとかして今のこの問題を解決せねば!と。

でもね〜、どうやってもIEの仕様(らしい)を変えられるはずもなく…。
仕方ないので色々と試した方法はボツになり、選択項目のフォントサイズを思いっきりちっこくして対応することで完了となりました。うぅぅむ。

ちなみにボツになった方法はこちら。

1:プルダウンの幅は指定したまま、選択した際に幅が広がる方法。
これは簡単なスクリプトの記述を追加するだけで再現することができます。
<select name="test" style="width:150px;" onfocus="this.style.width=''" onblur="this.style.width='150px'">
<option value="テスト項目1">テスト項目1</option>
<option value="テスト項目2">テスト項目2</option>
<option value="テスト項目3テキストテキストテキストテキスト">テスト項目3テキストテキストテキストテキスト</option>
</select>

プルダウンをクリックすると、イチバン長い項目に合わせて横幅がびろ〜んと広がります。んで選択したあと適当な場所(選択肢以外の画面上)をクリックすると、デフォルトの状態(短い横幅)に戻ります。
IEだけでなく、Opera、Firefoxなどでも同じ動きになります。(後者ブラウザは別にこの対応する必要無いと思うんですけどね…)
でもこの方法は普段あまり見かけないような動きをするので、ユーザーにとってはビックリする?というかなんか動き気持ち悪いね…みたいなかんじになったのでボツであります…。あと、何項目か検索項目があるので、びろーんと横に広がると他の項目が横にずれるのでデザインも一瞬崩れてしまうという難点も。タダコレに関しては、position=absoluteの指定をしておけば他の項目が横にずれるというコトは無くなるわけですが…右隣の項目が下に隠れるのでどっちにしてもダメっぽ。

2:プルダウン選択項目にtitle属性を追加して、カーソルを合わせると表示されるようにする。
<select name="test" style="width:150px;">
<option value="テスト項目1" title="テスト項目1">テスト項目1</option>
<option value="テスト項目2" title="テスト項目2">テスト項目2</option>
<option value="テスト項目3テキストテキストテキストテキスト" title="テスト項目3テキストテキストテキストテキスト">テスト項目3テキストテキストテキストテキスト</option>
</select>

これは単に画像とかリンクなどにも普通に使うALTやTITLE属性そのままです。なので対処法ってかんじにはなってないところがちょっとネ…。

そんな感じなので、IEにあわせてると結局どれもこれもいまいちな状態になってしまい、ぐだぐだ状態に。諦めろ!としか言いようがないこの仕様。しょんぼりっす…。
comments (2) | trackbacks (0) | edit

posted by 由奈



Comments

由奈 :: 2008/04/18 13:02 PM
puylさん>
はじめまして〜。コメントありがとうございます^^
IEだとoptionタグへのスタイルシート指定は、横幅とかだと
反映されないみたいなのです…背景色とかは反映されるのですけれども。
なのでほんと困ったちゃんですー。
最近はもっぱらFirefox基準でページを作っていたりします。
で、最後にIEで確認して調整する感じです。その調整の方が結構時間かかることも・・・(笑)。

また他にも困ったちゃん現象は色々あるので、ちょこっとずつ
書いていくと思います。またご覧になることがあったら是非つっこみ等お待ちしております♪
puyl :: 2008/04/17 18:17 PM
Filter Foundryの情報を探していたらこちらにたどり着きました。
そしてIEでoptionの幅が変になるというのが興味深かったので、関係ない記事にコメントしてみたり。

IEは色々と困ったちゃんですねー。
とっくにお試しになったことかもしれませんが、たとえばこんな感じの指定でもだめでしょうか。

.test {width: 150px;}
.test option {width: 300px;}

MacのみでIEの確認ができないので思いつきで済みません。
Firefoxでは指定に応じて幅が変わりました。

Comment Form

 
emoji:
com_End


Trackbacks

トラックバックはありません。

tb_End

CALENDAR
NEW ENTRIES
CATEGORIES
RECOMMEND
【FINAL FANTASY REMIX】…
FINAL FANTASY REMIX

Music (発売日:2008-08-06)
RECENT COMMENTS
ARCHIVES
PROFILE
OTHER