ここの情報は古いです。ご理解頂いた上でお取り扱いください。

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 shingo)

■現象

ページャのリンクと件数の間に余白がない

メッセージ(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)

messageP.png (3.3 KB) - added by takai 12 years ago.
ページャのリンクと件数の間に余白がない
message1.png (11.9 KB) - added by takai 12 years ago.
1行に表示しようと考えた際の見栄え
message2.png (12.1 KB) - added by takai 12 years ago.
修正後の見栄え

Download all attachments as: .zip

Change History (16)

Changed 12 years ago by takai

Attachment: messageP.png added

ページャのリンクと件数の間に余白がない

Changed 12 years ago by takai

Attachment: message1.png added

1行に表示しようと考えた際の見栄え

comment:1 Changed 12 years ago by takai

Owner: changed from nobody to takai
Status: newassigned

原因

1行に表示しようと考えた際の見栄え

XHTML+CSS化の時点では、『ごみ箱』でアイコン3つの説明と、ページャの部分を1行に表示できるような配置を考えており、margin値を0にして余白は空白類文字によるもの(HTMLソース中の改行)を想定していた。

しかしながらtplファイルではstrip関数により空白類が除去されていたため、結果的に余白がない状態になっていた。

対応

  • pagerRelativeMulti(上部)とpagerRelative(下部)で当該の間隔が異なる
  • 「xx件中 yy件~zz件を表示」の数値の桁数が増える、またはOsakaフォントなどで幅が広がる場合にページャ部の文字列が折り返される

といった結果が好ましくないため、tplファイルはそのままにし、CSSを書き直すことにする。

Changed 12 years ago by takai

Attachment: message2.png added

修正後の見栄え

comment:2 Changed 12 years ago by takai

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:3 Changed 12 years ago by takai

Keywords: 確認中 added

comment:2 の修正をお願いします。

comment:4 Changed 12 years ago by takai

Description: modified (diff)

comment:5 Changed 12 years ago by kiwa

Keywords: OpenPNE2.13.2 added; 確認中 removed
Milestone: OpenPNE2.12.4

comment:6 Changed 12 years ago by kiwa

Keywords: OpenPNE2.13.3 added; OpenPNE2.13.2 removed

comment:7 Changed 12 years ago by shingo

Description: modified (diff)
Keywords: 確認中 added

以下のリビジョンで修正しました。ご確認ください。

comment:8 Changed 12 years ago by ebihara

Keywords: 差し戻し added; 確認中 removed

xhtml_style.php への修正で、インデントが4スペースになってしまっています。

comment:9 Changed 12 years ago by shingo

Keywords: 確認中 added; 差し戻し removed

以下のリビジョンで修正しました。ご確認ください。

comment:10 Changed 12 years ago by ebihara

Keywords: 差し戻し added; 確認中 removed

1504行目の position: static; がインデントされていません。

comment:11 Changed 12 years ago by shingo

Keywords: 確認中 added; 差し戻し removed

以下のリビジョンで修正しました。ご確認ください。

comment:12 Changed 12 years ago by ebihara

Keywords: テスト待ち added; 確認中 removed

comment:13 Changed 12 years ago by kiwa

Keywords: テスト待ち removed
Resolution: fixed
Status: assignedclosed

以下のブラウザで確認しました。問題ありません。

WindowsXP SP3

  • !InternetExplorer6
  • !InternetExplorer7
  • Firefox1.5
  • Opera9.50
  • Safari3.1
Note: See TracTickets for help on using tickets.