Ich arbeite derzeit an einer Website, wo ein Benutzer eine mechanische Anfrage von einem Kunden auf der Website betrachten kann. Sie können dann die Anfrage ausdrucken.Textarea mit horizontaler Regel erscheint auf dem Druck
Ich versuche, die Anfrage nur auf der gedruckten Version eine "Notizen" -Abschnitt hinzuzufügen. Ich benutze Bootstrap, also versteckt es, bis der Druck einfach ist.
Mein Problem ist, dass ich horizontale Linien in das Textfeld, genau wie diese Antwort haben wollen: <textarea> with horizontal rule
Die Linien lassen sich gut auf der das Textfeld. Das Problem ist, dass sie nicht zeigen, wenn window.print() aufrufen
Auf der Seite:
Beim Drucken:
Gibt es eine Möglichkeit zu Machen Sie das in der Druckversion sichtbar?
<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;
}
Ich habe keine Ahnung, wie man das macht. Ich bin ein Anfänger in HTML und CSS, fügen Sie bitte ein Beispiel –
Kannst du genauer über das, was Sie rumstolziert haben? Dinge mit Z-Index stapeln? Oder erstellen Sie separate Druck/Bildschirm CSS-Dateien? Etwas anderes? –
Sie wissen, dass diese Frage mehr als 4 Monate alt ist, oder? Wenn ich es bis jetzt nicht geschafft hätte, war der Termin natürlich schon lange her. Es ist mir nicht gelungen, etwas zu tun, was Sie gesagt haben, außer dass ich ein Bild manuell mit den benötigten Zeilen erstellt habe und es dann mit einem CSS einfügte, das es verbirgt, wenn es nicht gedruckt wird. Deshalb habe ich es als akzeptiert markiert, da die Idee tatsächlich funktioniert hat, obwohl das nicht dein Hauptpunkt war (was ich nicht verstanden habe) –