ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Opened 11 years ago

Last modified 9 years ago

#3016 new enhancement

IE:「マイフレンド」の名称が長い場合、公開範囲変更のプルダウンメニューで「マイフレンドまで公開」が途中で見切れてしまう

Reported by: kiwa Owned by: nobody
Priority: minor Milestone:
Component: pne-xhtmlcss Version: 2.12.x & 2.14.x
Keywords: Cc:

Description (last modified by kiwa)

■現象

IE6/IE7にて、長い文が「マイフレンド」の名称に設定されていると公開範囲変更のプルダウンメニューで「マイフレンドまで公開」が途中で見切れてしまう。

サンプル画像

■原因

■修正内容

■関連情報

関連チケット

Attachments (1)

20080926_pc_page_h_config_prof.png (19.6 KB) - added by kiwa 11 years ago.
サンプル画像

Download all attachments as: .zip

Change History (3)

Changed 11 years ago by kiwa

サンプル画像

comment:1 Changed 11 years ago by kiwa

Description: modified (diff)

comment:2 Changed 9 years ago by takai

コメントしておきます。

事前調査

固定幅指定のされた select 要素で、IE6,7 において本件の問題が生じることに対して、JavaScript を用いて対応するようなライブラリがいくつか公開されています。

その中でも、多くの記事で挙げられているのが Select Cuts Off Options In IE (Fix) というものです。

その解決方法は、固定幅指定された select 要素に対する mouseover イベントで、select 要素の幅を auto に指定し直すというもののようです。これ以外のライブラリでは JS で動的に要素を生成するといったものもありましたが、今回は以下の対応方法を示しておきます。

提案する対応方法

JSライブラリを利用しても、select要素の選択中は結局 width: auto が指定されている場合と同じ見栄え(select要素自体が幅広)になってしまいます。

そのため、IE6,7 で文字が切れてしまうことが気になるのであれば、そもそも width: auto を指定する(固定幅指定をしない)ようにした方がスマートかもしれません。

選択前のプルダウンメニューとしては見栄えが悪く(親ボックスの overflow: hidden に隠れ、右端が切れているような見栄えに)なってしまいますが、文字が切れることは防げます。※「マイフレンド」の名称が長くない場合は、見栄えは悪くなりません。

  • IE7, IE6 向けのスタイルを追加します
    .formTable table table td.publicSelector select {
    	width: 150px;
    }
    *:first-child+html .formTable table table td.publicSelector select {
    	width: auto;
    }
    * html .formTable table table td.publicSelector select {
    	width: auto;
    }
    

備考

このためだけに JS を追加するなどのことを考えると、CSSによる上記の対応が最善策なように思われます。

なお、ノンカスタマイズの OpenPNE2.12.x, 2.14.x では、固定幅指定の select 要素は、 .formTable table table td.publicSelector select のみのようなので、上記のようなセレクタになります。

他に select 要素を固定幅指定していて本件の問題が生じるようであれば、全ての select 要素を対象に IE6,7 では width: auto を最優先で指定するといった対応が必要です。

Note: See TracTickets for help on using tickets.