CSS - PRINT formulario

   
Vista:

PRINT formulario

Publicado por javi (2 intervenciones) el 19/05/2016 23:05:18
Hola.

Estoy intentando imprimir un formulario en papel.

Para ello he habilitado un botón que llama por JavaScript al método correspondiente y lo hace bien, pero el problema es que no sé como hacer para que imprima todo este contenido:

Captura

Como parece lógico, el papel es más pequeño y reduce la página imprimible a:

Captura2

Me gustaría saber cómo puedo hacer para comprimir el contenido y poder imprimirlo todo tal y como puse en la primera imagen.

El formulario lo pongo aquí:

http://oyg.esy.es/

MUCHAS GRACIAS POR VUESTRA AYUDA

PD.: También he tocado reglas del tipo @media print y @page pero sin éxito
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

PRINT formulario

Publicado por xve (352 intervenciones) el 20/05/2016 07:46:26
Hola Javi, tu mismo has probado como hacerlo... lo que tienes que hacer, es por estilos, disminuir el tamaño de los inputs y de las fuentes para que te quepa en un papel...

Si por ejemplo, tienes este estilo:
1
2
3
4
#formulario input, #formulario select {
    display: block;
    width: 150px;
}

En el @media print
1
2
3
4
5
@media print {
    #formulario input, #formulario select {
        width: 80px;
    }
}

I ir definiendo así todos los tamaños para que te quepa en en papel...

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

PRINT formulario

Publicado por javi (2 intervenciones) el 20/05/2016 19:12:03
No.
No ha funcionado.

Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

PRINT formulario

Publicado por Carolina (6 intervenciones) el 20/05/2016 21:07:28
Las reglas CSS de la versión para imprimir se aplican solamente al medio print. Por lo tanto, en primer lugar se crea una nueva hoja de estilos y al enlazarla se especifica que sólo debe aplicarse en las impresoras:

1
<link rel="stylesheet" type="text/css" href="/css/imprimir.css" media="print" />

cuando se imprime una página se aplican los mismos estilos que se aplican al visualizarla en la pantalla.

Debes seguir una serie de pasos:

1) Ocultar los elementos que no se van a imprimir:

1
2
3
#cabecera, #menu, #lateral, #comentarios {
  display: none !important;
}

2) Corregir la estructura de la página:

1
2
3
4
5
6
body, #contenido, #principal, #pie {
  float: none !important;
  width: auto !important;
  margin:  0 !important;
  padding: 0 !important;
}


3) Modificar los colores y tipos de letra:

1
body { color: #000; font: 100%/150% Georgia, "Times New Roman", Times, serif; }


Espero te sirva
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar