OpenPNE 3

Overview （概要）¶

コミュニティトピックの一覧ページ（コミュニティトピック一覧、コミュニティ最新書き込み）では、次のようなリストが表示される。

|     2010年9月10日 11:05    | a(0) (dummy2)               |
|     2010年7月23日 13:30    | name(0) (dummy9)            |
|     2010年7月23日 13:30    | name(0) (dummy9)            |

上記のようなリストで、言語が英語に設定されてるような場合に、日付部分の表記が長くなって日付が折り返してしまうことがある。

日付が折り返すとは次のような状態である。言語を英語に設定した場合に必ず折り返すわけではなく、ブラウザの種類やフォント、文字サイズによって結果は異なる。同様に、言語が日本語であってもこの問題が発生する可能性はある。

| September 10, 2010 11:05 A | a(0) (dummy2)               |
|              M             |                             |
|   July 23, 2010 1:30 PM    | name(0) (dummy9)            |
|   July 23, 2010 1:30 PM    | name(0) (dummy9)            |

日付が折り返したとき、上記のように左側と右側のレイアウトが保持されるべきであるが、CSSの記述が十分ではないためにレイアウトが崩れてしまっている。

実際のレイアウトが崩れた表示は、次の画像を参照してください。

• http://redmine.openpne.jp/attachments/106/float_no_clear.jpg

また、コメント(note-8) http://redmine.openpne.jp/issues/1578#note-8 でもこの問題について説明を示しています。

Range of problems （問題となる箇所）¶

トピックリストに限らず、同様のリスト（同様の原因を含みうる箇所）では同じ問題が発生する可能性があります。

このチケットでは、確認できている箇所 ".recentList dl" と ".commentList dl" を少なくとも修正することとします（もしも同様の問題が別の箇所で起こることが確認された場合は、このチケットが完了していなければこのチケットで、既にクローズされた場合は新しいチケットで対応することを予定しています）。

Causes （原因）¶

CSSの記述が不十分である（「コミュニティトピックの一覧ページ」を問題として示していますが、この原因は opCommunityTopicPlugin ではなく opSkinBasicPlugin のCSSです）。

アイテム一つは dl 要素で、日付部分を dt 要素、トピックタイトル部分を dd 要素でマークアップしている。

<div class="****List">
  <dl>
    <dt>左側（日付部分）</dt>
    <dd>右側（タイトルなど）</dd>
  </dl>
  <dl>
    <dt>左側（日付部分）</dt>
    <dd>右側（タイトルなど）</dd>
  </dl>
  ... （dl要素がアイテム数だけ繰り返される）
</div>

dt { float: left; width: DT_WIDTH; }, dd { margin-left: DT_WIDTH; } のようにCSSを記述しているが（※）、この記述だけで意図したレイアウトになるには、「左側の方が右側よりも常に高さが小さい」という条件が必要になる。

※ 実際の margin-left プロパティ値は DT_WIDTH に padding 値などを加えた値です。

これを考慮して dd 要素には min-height: 5.5em や height: 1.2em といった記述があるが、この値は不十分であり、日付が折り返したりすることを想定していない。

根本的には、日付が折り返す可能性ではなく、「左側の方が右側よりも高さが大きい」という場合の可能性を考慮すべきである。

Way to fix （修正内容）¶

dl 要素の子要素の中で、float している dt 要素が最も高さが大きくなる場合（左側が高くなる場合）に、アイテム全体の高さが保たれるように、dl 要素に clearfix 相当の指定を行う。

また、レイアウトが崩れる問題とは別に、左側と右側の境界線（中央の線）が、左側が高くなる場合にも dl 要素の高さいっぱいに 1px で表示されるように、 dt, dd に border の指定を行う。

具体的な修正内容はコメント(note-6) http://redmine.openpne.jp/issues/1578#note-6 に示しています。