2021年11月8日月曜日

A4横 CSS(スタイルシート) の landscape がうまく行かない

「A4横」左図の帳票レイアウトを作成して印刷しようとしたら、横幅が狭く表示されてうまく行きませんでした。

WEBサイトを検索すると、あちこちにこうすればできると書いてある。

ちなみに、bootstrap5 を使ってレイアウトしてます(帳票なのでレスポンシブは考慮してない)

@page {
    size: A4 landscape; 
    size: 297mm 210mm;
    margin: 0mm;
}

A4横に、なるにはなるんだけど、コンテンツの横幅がどう見ても狭い。
A4縦の時の横幅を超えない(程度の)横幅でしか印刷されない・・・・
なぜじゃ!?

いろいろ調べたり、調べてもらったりして bootstrap がまずいことがわかりました。
(Hさん、ご協力、ありがと。)

bootstrap の次の部分が影響してましたよ、と。

.container, .container-lg, .container-md, .container-sm{
 max-width: 960px;
}

以下のようにスタイルシートを追記すると、ちゃんとA4横で印刷されるようになりました。

@media print {
    .container {
         max-width: 297mm !important;
    }
}


めでたし、めでたし。

0 件のコメント:

コメントを投稿