2016-03-20 13 views
1

Şu anda bir kullanıcının sitede bir müşterinin mekanik bir isteğine bakabileceği bir web sitesinde çalışıyorum. Ardından isteği yazdırabilirler.Yatay kurallı Textarea baskıda gösteriliyor

Sadece basılı sürümde isteğe "notlar" bölümü eklemeye çalışıyorum. Ben bootstrap kullanıyorum, bu yüzden baskı kolay olana kadar saklamak. <textarea> with horizontal rule

çizgiler textarea büyük çalışır:

Sorunum tam olarak bu cevap gibi, textarea yatay çizgiler olsun istiyorum olmasıdır. yazdırırken

:

bir yolu var mı sorun window.print() sayfasında

arayarak yapıldığında gösterilmiyor kalmamasıdır Bu, baskı sürümünde gösterilsin mi?

<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; 
} 

cevap

0

Çoğu millet kendi tarayıcıları varsayılan seçeneğe belirledik "arka baskı yoktur." Koyu renkli bir sayfa mürekkebinizi hızlı bir şekilde yiyebilir! "Satırlarınız", "arka plan" dan yararlanılıyorsa, yazdırmazlar. Geçici çözüm olarak, bağımsız bir resim oluşturmayı deneyin. Z dizinini uygun şekilde ayarlayın (konumu kullanmayı unutmayın) ve ardından onu yalnızca css için gösterilen css ekranından gizleyin.

+0

Bunlardan herhangi birinin nasıl yapılacağını bilmiyorum. Html ve css'de yeni başlayan biriyim, lütfen bir örnek ekleyin –

+0

Neye şaşırmışsınız konusunda daha spesifik olabilir misiniz? Z-endeksi ile şeyleri istifleme? Ya da ayrı baskı/ekran css dosyaları oluşturuyorsunuz? Başka bir şey? –

+0

Bu sorunun 4 aylıktan fazla doğru olduğunu biliyor musunuz? Şimdiye kadar çalışmayı başaramamış olsaydım, belli ki, son teslim tarihi çok uzun zaman önceydi. İhtiyacım olan çizgilerle el ile bir görüntü oluşturmanın dışında istediğin bir şeyi yapmayı başaramadım, sonra da baskılamadığı zaman onu sakladığım bir css ile koymadım. Bu yüzden kabul edildi olarak işaretledim, çünkü bu fikir aslında işe yaradı, ana noktanız olmasa da (anlamadım) –

0

Bu, yazdırmadan önce <textarea>'un nasıl işlendiği ile benzer durumlarda bildirilmiştir. Bakmaya değer bir çözüm, <textarea> standardını veya yazdırmadan önce/çağrılırken başka bir öğe olarak kopyalamaktır.

jQuery'yi kullanarak bir <textarea> değiştirmeye ilişkin bir örneği gösteren bir kaynak şu adreste bulunabilir: http://www.entwicklungsgedanken.de/2011/02/07/how-to-replace-textarea-tags-with-simple-div-tag-including-it-content-for-a-printing-view/.