Opened 12 years ago
Closed 12 years ago
#2942 closed defect (fixed)
メッセージボックスの「前を表示」「件数」「次を表示」の間隔がない
Reported by: | takai | Owned by: | takai |
---|---|---|---|
Priority: | minor | Milestone: | OpenPNE2.12.4 |
Component: | pne-xhtmlcss | Version: | 2.12.x & 2.14.x |
Keywords: | OpenPNE2.13.3 | Cc: |
Description (last modified by )
■現象
メッセージ(h_message_boxページ)のアイコンの説明付きのページャがある部分(pagerRelativeMultiクラス)で、「前を表示」と「~件中 ~件を表示」と「次を表示」という文字列の間に余白(間隔)がない。
■発生バージョン
XHTML+CSS化を行った 2.12.0以降(2.13.xも含む)
■再現手順
アイコンの説明がある『受信メッセージ』か『ごみ箱』に、「次を表示」(「前を表示」も)が表示される程度のメッセージをためて、そのページにアクセスする。
■原因
空白がtplファイル内でstrip関数により除去されていたため、結果的に余白がない状態になっていた。
■修正内容
CSSを以下のように修正
- .pager p に対する margin-left: 0 (IEに対しては margin-left: 4px) の指定を削除する
- .pager の幅を350pxに、.icons の幅を160pxに変更する
Attachments (3)
Change History (16)
Changed 12 years ago by
Attachment: | messageP.png added |
---|
comment:1 Changed 12 years ago by
Owner: | changed from nobody to takai |
---|---|
Status: | new → assigned |
原因
XHTML+CSS化の時点では、『ごみ箱』でアイコン3つの説明と、ページャの部分を1行に表示できるような配置を考えており、margin値を0にして余白は空白類文字によるもの(HTMLソース中の改行)を想定していた。
しかしながらtplファイルではstrip関数により空白類が除去されていたため、結果的に余白がない状態になっていた。
対応
- pagerRelativeMulti(上部)とpagerRelative(下部)で当該の間隔が異なる
- 「xx件中 yy件~zz件を表示」の数値の桁数が増える、またはOsakaフォントなどで幅が広がる場合にページャ部の文字列が折り返される
といった結果が好ましくないため、tplファイルはそのままにし、CSSを書き直すことにする。
comment:2 Changed 12 years ago by
CSSを修正する。xhtml_style.php 『29. messageList(メッセージリスト)』内の一部
- 修正前
-
.messageList .pagerRelativeMulti .pager { position: static; float: right; width: 290px; margin-top: 1px; text-align: right; } .messageList .pagerRelativeMulti .pager p { margin-left: 0; } * html .messageList .pagerRelativeMulti .pager p { margin-left: 4px; } *:first-child+html .messageList .pagerRelativeMulti .pager p { margin-left: 4px; } .messageList p.icons { float: left; width: 220px; }
- 修正後
-
.messageList .pagerRelativeMulti .pager { position: static; float: right; width: 350px; margin-top: 1px; text-align: right; } .messageList p.icons { float: left; width: 160px; }
- .pager p に対する margin-left: 0 (IEに対しては margin-left: 4px) の指定を削除する
- .pager の幅を350pxに、.icons の幅を160pxに変更する
見栄えは次の画像のようになる(背景色は確認用、上記のスタイル記述には含まれていない)。
comment:4 Changed 12 years ago by
Description: | modified (diff) |
---|
comment:5 Changed 12 years ago by
Keywords: | OpenPNE2.13.2 added; 確認中 removed |
---|---|
Milestone: | → OpenPNE2.12.4 |
comment:6 Changed 12 years ago by
Keywords: | OpenPNE2.13.3 added; OpenPNE2.13.2 removed |
---|
comment:7 Changed 12 years ago by
Description: | modified (diff) |
---|---|
Keywords: | 確認中 added |
comment:8 Changed 12 years ago by
Keywords: | 差し戻し added; 確認中 removed |
---|
xhtml_style.php への修正で、インデントが4スペースになってしまっています。
comment:9 Changed 12 years ago by
Keywords: | 確認中 added; 差し戻し removed |
---|
comment:10 Changed 12 years ago by
Keywords: | 差し戻し added; 確認中 removed |
---|
1504行目の position: static; がインデントされていません。
comment:11 Changed 12 years ago by
Keywords: | 確認中 added; 差し戻し removed |
---|
comment:12 Changed 12 years ago by
Keywords: | テスト待ち added; 確認中 removed |
---|
comment:13 Changed 12 years ago by
Keywords: | テスト待ち removed |
---|---|
Resolution: | → fixed |
Status: | assigned → closed |
以下のブラウザで確認しました。問題ありません。
WindowsXP SP3
- !InternetExplorer6
- !InternetExplorer7
- Firefox1.5
- Opera9.50
- Safari3.1
ページャのリンクと件数の間に余白がない