2016-03-20 24 views
1

私は現在、ユーザーがサイト上の顧客からの機械的な要求を見ることができるウェブサイトで作業しています。その後、要求を印刷できます。印刷時に水平ルールが表示されるテキストエリア

"ノート"セクションを印刷版のリクエストにのみ追加しようとしています。私はブートストラップを使用しているので、印刷が簡単になるまで隠しています。 <textarea> with horizontal rule

行がテキストエリアに素晴らしい仕事:

私の問題は、私はまさにこの答えのように、テキストエリアでの水平線を持つようにしたいということです。印刷するとき

方法にはある問題がwindow.print()ページで

を呼び出すときに、彼らが表示されないということですこの版を印刷版に表示させますか?

<dt class="visible-print"> 
    Notes 
</dt> 

<dd class="visible-print"> 
    <textarea class="notes" rows="10" cols="100"></textarea> 
</dd> 
.notes { 
    background-image: -webkit-linear-gradient(left, white 10px, transparent 10px), -webkit-linear-gradient(right, white 10px, transparent 10px), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px); 
    background-image: -moz-linear-gradient(left, white 10px, transparent 10px), -moz-linear-gradient(right, white 10px, transparent 10px), -moz-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px); 
    background-image: -ms-linear-gradient(left, white 10px, transparent 10px), -ms-linear-gradient(right, white 10px, transparent 10px), -ms-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px); 
    background-image: -o-linear-gradient(left, white 10px, transparent 10px), -o-linear-gradient(right, white 10px, transparent 10px), -o-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px); 
    background-image: linear-gradient(left, white 10px, transparent 10px), linear-gradient(right, white 10px, transparent 10px), linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px); 
    background-size: 100% 100%, 100% 100%, 100% 31px; 
    border: 1px solid #ccc; 
    border-radius: 8px; 
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 
    line-height: 31px; 
    font-family: Arial, Helvetica, Sans-serif; 
    padding: 8px; 
} 

答えて

0

ほとんどの人々彼らのブラウザがデフォルトのオプションに設定されている「背景を印刷しません。」暗い背景のページはあなたのインクを速く食べることができます! "行"が "背景"を利用して実装されている場合、印刷されません。

回避策として、独立したイメージを作成してみてください。そのz-indexを適切に設定し(positionを使用することを忘れないでください)、スクリーンcssから非表示にして、print cssだけを表示します。

+0

どのようにすればいいのかわかりません。私はhtmlやCSSの初心者です。例を追加してください。 –

+0

あなたは何を困惑しているのか、より具体的になりますか? z-indexで物を積み重ねる?または別の印刷/画面CSSファイルを作成しますか?他に何か? –

+0

あなたはこの質問が4か月以上前のことであることを理解していますか?私が今までにそれを動作させることができなければ、明らかに期限はずっと前です。私は必要な行を使って手動でイメージを作成し、印刷していないときにCSSを隠してそこに置く以外は、何もすることはできませんでした。だからこそ、私はそれがあなたの主なポイント(私は理解していない)ではなかったとしても、アイデアが実際に働いたので、それを受け入れたものとしてマークしたのです。 –

0

これは、印刷前に<textarea>がレンダリングされる方法と同様の状況で報告されています。検討する価値のある解決策は、<textarea>を標準<div>または印刷の前に、または他の要素として複製することです。

<textarea>をjQueryで置き換える方法の例を示すリソースは、http://www.entwicklungsgedanken.de/2011/02/07/how-to-replace-textarea-tags-with-simple-div-tag-including-it-content-for-a-printing-view/です。

関連する問題