新規投稿
フォローする

@media print{}が適用されない

CSSの@media print{}が適用されません。

 

確認したのは下記のとおりです。

・デバッグ→ 適用

・印刷プレビュー→ 適用されない

・実際に印刷したもの→ 適用されない

・文字列フォームだけの別アプリ→ 適用

 

cssのコードは下記のとおりです

@charset "UTF-8";
@media print {
 .layout-gaia.showlayout-gaia {
  margin-right: auto;
  margin-left: auto;
 }
}

 

知識不足で申し訳ありません。

ご教授いただければ幸いです。

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーー

追記

①印刷プレビュー

 

②プラグインの設定

③CSSの中身

 

④CSSのデバッグ(適用されなくなった…)

 

上記状態でCSS適用されていません。

原因わからずでお手上げ状態です…

ご教授いただければ幸いです。

 

 

0

7件のコメント

Avatar
harada
@charset "UTF-8";

があると私の環境では中央寄せにはなりませんでした。

当該箇所を削除すると中央寄せになりました。

1
Avatar
harada
1
Avatar
関石

haradaさま

ご回答ありがとうございました。

試してみましたが、中央寄せになりませんでした。

引き続き調べてみます。

以上、よろしくお願いいたします。

関石により編集されました
0
Avatar
mls-hashimoto

cssをコピペしてこちらでも同様の状態になり気付きましたが、全角スペースを使っているようです。

1
Avatar
関石

mls-hashimoto さま

ご回答ありがとうございます。

半角に修正しましたが、適用されませんでした。

引継ぎ調べてみます。

以上、よろしくお願いいたします。

0
Avatar
mls-hashimoto

関石さま

極端に横に長いフィールドや関連レコードフィールド等はありますか?当方でも何かのレコードを取得した関連レコードを含む場合はshowlayout-gaiaのwidth自体が大きい数値になるためmarginの設定がうまくいきませんでした

widthを指定してみてはいかがでしょうか?

@media print {
.layout-gaia.showlayout-gaia {
width: 75% !important;
margin-right: auto;
margin-left: auto;
}
}
1
Avatar
関石

mls-hashimotoさま

 

ご回答ありがとうございました。

連絡遅くなり申し訳ありません。

いただいたコードを試したところ、中央寄せになりました。

助かりました。

以上、よろしくお願いいたします。

1
サインインしてコメントを残してください。