Context Navigation

← Previous Ticket
Next Ticket →

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

#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:	new → assigned

原因

XHTML+CSS化の時点では、『ごみ箱』でアイコン３つの説明と、ページャの部分を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に変更する

見栄えは次の画像のようになる（背景色は確認用、上記のスタイル記述には含まれていない）。