列の書式設定を試してたらIE11のバグに遭遇した話

こんにちは。
めずらしくSharePoint Onlineの話題でも。
モダンUIの案件管理リストで、ステータス列に赤青黄色の信号機を表示しようと列の書式設定をいろいろ試していたときのお話です。

手始めにMicrosoftの公式ドキュメントを見ていたら、
列の書式設定で SharePoint をカスタマイズする
以下git-hubレポジトリにほぼそのものなサンプルがあったので、さっそく拝借します。
Traffic Light (Red-Yellow-Green) Status Indicator
できたできた、と喜んでいたところ、IE11でみたときだけ上下センタリングが効かず上に張り付いちゃってます。

なんでだ・・・と頭を悩ましつつ、CSSを調べてみたところ、列の書式設定をすると自動的に「.sp-field-customFormatter」というクラスが当たるみたいなんですが、ここのalign-items: centerが効いていないようです。

さらに調べると、これIE11のバグの模様。
https://github.com/philipwalton/flexbugs/issues/231
display:flexの要素で、min-heightを指定するとalign-items: centerが効かなくなるみたいです・・・
Microsoftぅー!!!という感じですが、気を取り直して上記スレッドのworkaroundを試してみました。
min-heightより小さい値、ということでheightに10pxほど指定してみます。
おおー、うまくいきました!

以下、サンプルコードです。

事情を知らない人からみたら意味不明のスタイル指定ですが、指摘されたらIE11で中央揃えにするオマジナイだと言ってあげてください。
(てゆーかIE11のバグを直してほしいですけどね!)

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください