Backport（バックポート） #2015
完了
[.recentList dl] や [.commentList dl] などで float の回り込み解除の対処がされていないため、レイアウトが崩れる
100%
説明
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の記述が十分ではないためにレイアウトが崩れてしまっている。
実際のレイアウトが崩れた表示は、次の画像を参照してください。
また、コメント(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 に示しています。
