Stampa foglio di stile - Conversione degli input in testo

Question

Ho una tabella che contiene alcune caselle <input type="text"> e voglio che vengano visualizzate come testo normale durante la stampa. Ho creato un supporto = stylesheet "print" con

input 
{ 
border-style: none; 
} 

in esso, e questo elimina il confine in modo che il contenuto sembra proprio testo, ma l'ingresso è ancora spingendo la larghezza della colonna alla sua larghezza effettiva (non sorprendentemente) quindi ottengo lo spazio vuoto inutile e le larghezze delle colonne. C'è un modo strano per impostare in qualche modo la larghezza dell'input alla sua dimensione del contenuto usando CSS, o qualche altro modo per risolvere questo problema?

Qualcuno su un altro forum ha suggerito di utilizzare un pulsante di stampa che crea script lato client per modificare fisicamente il markup della pagina, ma sfortunatamente ciò non è molto pratico a causa della complessità e della natura dinamica della pagina.

Sono abbastanza sicuro che questo non può essere fatto, ma ho pensato di chiedere.

Answer 1

No, non penso che questo possa essere fatto senza alcuni script. Ma la scripting sarebbe davvero facile da raggiungere con un quadro simile Jquery:

• Per ogni elemento di input, si creerebbe un <span> accanto ad essa e dargli una classe che è nascosto nel media="screen" foglio di stile, e visibile in media="print".

• L'elemento di input stessa otterrebbe una classe che funziona in senso inverso, visibile in screen e nascosto in print.

• Ogni elemento di input ottiene un evento change che aggiorna il vicino span.

Non ho la routine JQuery ancora tirare questo fuori dalla mia manica, e non il tempo di mettere insieme in questo momento, ma è sicuramente risolvibile e ancora abbastanza discreto - non c'è bisogno di eseguire qualsiasi scripting quando l'utente inizia a stampare.

Scommetto che se si ri-tag la domanda o chiedere uno nuovo, uno dei nostri residente guru JQuery sarà uno sguardo a questo :)

Answer 2

input { border-style: none; display: inline} 

Answer 3

mi sono imbattuto in questa ricerca di informazioni su come stile le mie forme e alcune altre cose.

Dopo aver combinato qualche CSS, ho scoperto un metodo solo CSS che funziona per me.

Tutte le mie forme hanno uno stile che implica uno sfondo colorato e un bordo nero.

Nella mia stampa file CSS ho copiato il mio modulo css e cambiato tutti i colori (non il testo stesso) in bianco. In altre parole nasconde la mia casella di testo e visualizza solo il testo.

CSS originale: #form textarea, #form input, #form select {border: 1px solid #ddd; color: # 313131; }

Stampa CSS - #form textarea, #form input, #form select {border: 1px solid #fff; color: #fff; }

funziona come un fascino =>

Spero che questo aiuti

Answer 4

sto usando ASP.NET e ha avuto lo stesso problema.

ho risolto con l'aggiunta di un'etichetta che corrisponde alla mia casella di testo, e aveva due classi istituite:

In @media schermo:

.hdnPrint {visibility:visible;display:block;} 
.visPrint {visibility:hidden;display:none;} 

In @media stampa:

.hdnPrint {visibility:hidden;display:none;} 
.visPrint {visibility:visible;display:block;} 

Per la casella di testo, ho assegnato la classe hdnPrint e sull'etichetta ho assegnato la classe visPrint. Quando l'utente stampa il modulo, viene visualizzata l'etichetta e il campo modulo è nascosto.

Presumo che si possa fare qualcosa di simile in un ambiente non-ASP.NET seguendo lo stesso schema.

Nessuno script necessario.

Answer 5

Se si utilizza Bootstrap:

@media print { 
    .no-print { 
    display: none !important; 
    } 

    .form-control 
    { 
    border: 0; 
    padding:0; 
    overflow:visible; 
    } 
} 

Answer 6

Per definire la larghezza dei campi di input nella sezione stampa CSS, uso:

width: ?cm 

per gli elementi di ingresso corrispondenti.

Testato in Firefox; forse non funzionava nelle versioni precedenti del browser.