Project

General

Profile

Backport(バックポート) #2015

[.recentList dl] や [.commentList dl] などで float の回り込み解除の対処がされていないため、レイアウトが崩れる

Added by Shinichi Urabe over 10 years ago. Updated over 10 years ago.

Status:
Fixed(完了)
Priority:
Normal(通常)
Assignee:
Target version:
Start date:
2010-09-10
Due date:
2011-05-06
% Done:

100%


Description

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 に示しています。


Related issues

Related to OpenPNE 3 - Bug(バグ) #1578: [.recentList dl] や [.commentList dl] などで float の回り込み解除の対処がされていないため、レイアウトが崩れる Fixed(完了) 2010-09-10

Associated revisions

Revision ac1036da (diff)
Added by Minoru Takai over 10 years ago

(fixed #2015, BP from #1578) CSS fix for float+margin layout on ".recentList dl" and ".commentList dl"

History

#1 Updated by Minoru Takai over 10 years ago

  • Status changed from New(新規) to Accepted(着手)
  • Assignee set to Minoru Takai

元チケットが完了次第、修正を取り込みます。

#2 Updated by Minoru Takai over 10 years ago

master 側でチケットが完了となっていませんが、修正内容から想定される影響と実装者による動作テストでは、今回の修正は副作用(懸念される予期せぬ崩れなど)はないと認識しています。もしあったとしても軽微な追加修正で済むものと思われます。

このため master 側での動作テストを待つ必要はないと判断し、同様の修正を 3.4.x に取り込みます。

#3 Updated by Minoru Takai over 10 years ago

  • Status changed from Accepted(着手) to Pending Review(レビュー待ち)
  • % Done changed from 0 to 50

更新履歴 ac1036da23d958aa2001e95fc4df43822914877c で適用されました。

#4 Updated by Yuma Sakata over 10 years ago

テストOKです。

IE6、7、8、Safari5.0.4でテストした場合、文字が枠から飛び出ないのですが、下記のような形で投稿日時が見づらくなるのが気になりました。

2011年5月6日 11:0
    8

Firefox3.6.17、Opera11.10は問題ありません。

#5 Updated by Shinichi Urabe over 10 years ago

  • Status changed from Pending Review(レビュー待ち) to Rejected(差し戻し)

http://redmine.openpne.jp/issues/1578#note-9 と同様の理由で差し戻し

#6 Updated by Minoru Takai over 10 years ago

  • Status changed from Rejected(差し戻し) to Accepted(着手)

ステータスを着手にします。

#7 Updated by Minoru Takai over 10 years ago

  • Status changed from Accepted(着手) to Pending Review(レビュー待ち)

チケットの Description を書き換えました。

#8 Updated by Shinichi Urabe over 10 years ago

  • Status changed from Pending Review(レビュー待ち) to Fixed(完了)
  • % Done changed from 50 to 100

確認した点

  • http://redmine.openpne.jp/issues/1578#note-12 と同等の理由かつ、masterのソースとの差分に差異がない
  • 3.4とmasterのバンドルされているプラグインやコアのソースでこの recentList class や commentList class を使っている箇所で影響があるほど、HTMLタグレベルでの差異は見当たらなかったので問題ない

テストは完了しており、ソースも問題ないと判断したのでチケットを完了にします

Also available in: Atom PDF