Discussion :

[leara500]

Bonjour,

Je développe une application de gestion des horaires. Un certains nombre de donnée doit apparaître à l'affichage mais pas à l'impression.
Grâce aux conseils des membres de ce forum, j'utilise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 @media print {

. Et cela fonctionne.

Mais le problème, c'est qu'en enlevant les informations à l'impression, il y a beaucoup trop d'espace dans les lignes de mon tableau. Dès lors, j'aimerai réduire la hauteur de mes lignes.

J'ai essayé ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 @media print {
  #hauteurLigne{
      height: 10px;
    }
}

et dans mon formulaire (ceci n'étant qu'un extrait de mon formulaire) j'ai mis :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div id="hauteurLigne">
	<tr>
		<s:hidden id="idPersonneSelected" name="idPersonneSelected" value="%{personneDto.idPersonne}"/>
 
		<td><s:property value="serviceDto.nomService"/></td>
		<td>  <b><s:property value="personneDto.nom"/> 
			<s:property value="personneDto.prenom"/> <br> </b>
 
			<div id="heureContrat">
				 Heure contrat : <br>
				<input type="hidden" name="nbHeureAfaire_<s:property value='%{personneDto.idPersonne}'/>" id="nbHeureAfaire_<s:property value='%{personneDto.idPersonne}'/>" value="<s:property value='personneDto.horaireContrat'/>">
 
 
 
			<div id="nbHeureAfaire_<s:property value='%{personneDto.idPersonne}'/> "> <s:property value="personneDto.horaireContrat"/> Heure</div>
			</div>
			Heure Realisé : <br>
			<input type="hidden" name="nbHeureFaite_<s:property value='%{personneDto.idPersonne}'/>" id="nbHeureFaite_<s:property value='%{personneDto.idPersonne}'/>" value="<s:property value='compteurDto.horaireFaite'/>">
			<div id="div_nbHeureFaite_<s:property value='%{personneDto.idPersonne}'/>"> <s:property value='compteurDto.horaireFaite'/> heure</div>
		</td>
 
		<!-- Lundi -->		
 
		  <td style="text-align: center;">
		   <div id ="divJour1_<s:property value="%{personneDto.idPersonne}"/>" style="display: block; text-align: center;">
		  <div id="horaire1_<s:property value="%{personneDto.idPersonne}"/>" style="display: block; text-align: center; height: 100%;">
			 <table border="0" style=" background-color: transparent; ">
 
					<!-- Gestion des horaires travailles -->

Merci beaucoup de votre aide

[Bovino]

Une balise <div> ne peut pas être parent direct d'une balise <tr>...
Du coup, le navigateur la supprime purement et simplement.

[leara500]

Mince alors. Merci beaucoup de votre réponse.

Mais comment puis je dois réduire la hauteur de mon <tr> ? Il n'y a aucune solution ?

[NoSmoking]

Bonjour,
si tu mets en display:none les éléments à ne pas imprimer, cela ne devrait pas laisser de lignes blanches.

[leara500]

Effectivement, je n'ai pas de ligne blanche mais j'ai beaucoup d'espace entre ls bordure et le texte. Et j'aimerai réduire cette espace afin qu'il ne sorte que 2 pages au lieu de 3


[IMG][/IMG]

C'est l'espace se trouvant entre la bordure et le nom de la personne que j'aimerai réduire ....

[rodolphebrd]

Il doit y avoir un padding par défaut (top et bottom) à diminuer.

J'avoue que la structure de votre code m'échappe!
Est-ce du Html?

[leara500]

C'est du jsp ^^.
J'ai testé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<s:iterator value="planningPersonneList" status="planningPersonneListStatus">
   <tr style="padding-bottom: 0px; padding-top: 0px;">
       <s:hidden id="idPersonneSelected" name="idPersonneSelected" value="%{personneDto.idPersonne}"/>
      <td><s:property value="serviceDto.nomService"/></td>
      <td>  <b><s:property value="personneDto.nom"/> 
      <s:property value="personneDto.prenom"/> <br> </b>

Mais je n'ai pas de changement dans mon affichage u_u'

[rodolphebrd]

Essayez d'appliquer ces propriétés à la cellule concernée et non à la ligne.

[leara500]

Merci beaucoup pour votre aide

J'ai fait

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<td style="text-align: center; padding-bottom: 0px; padding-top: 0px;">

pour chacun de mes td se trouvant dans mon tr mais cela ne marche pas.

Il faut dire, que contrairement à l'écran, je ne dois imprimer qu'un certain nombre d'information (d'ou la présence d'espace à mon impression mais pas à mon affichage à l'écran u_u)'

[rodolphebrd]

Essayez pour voir:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
@media-print {
*{
   padding:0;
   margin:0;
}
}

Note: plutôt que de vous embêtez à mettre des styles inline créez une règle css

[leara500]

Merci infiniment de votre aide.

J'ai testé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
@media-print {
*{
   padding:0;
   margin:0;
}
}

Mais il n'y a pas de changement. Et pour être honnête je n'ai pas compris le * .

Que voulez vous dire par créer une règle CSS

[rodolphebrd]

* est sélecteur universel qui cible tous les éléments.

Pouvez-vous envoyer tout votre code en zip.

Je pourrai y voir plus clair.

[leara500]

Merci beaucoup de votre aide

Vous souhaitez voir l'intégralité de mon code de la page concerné ou de l'application complète ?

[rodolphebrd]

Oui en pièce jointe

[leara500]

Voilà, je vous ai mis en pièce jointe la totalité du code de mon fichier (et non celui de l'application)


Merci beaucoup de votre aide

[leara500]

La solution que vous m'avez donné fonctionne ! ! !
J'ai trouvé d'où venait mon problème ^^
C'était à cause de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
 <td><s:textarea name="observation_%{personneDto.idPersonne}" rows="5" cols="15" value="%{compteurDto.observation}" /> </td>

J'avais mis la hauteur de mon observation à 5. En le mettant à 4, tout s'est réduit !!!!!!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
@media print {
*{
   padding:0px;
   margin:0px;
   margin-left: 0px;
   margin-right: 0px;
   margin-top:0px;
   margin-bottom:0px;
 
 }
}

Merci beaucoup de votre aide ! ! !

[rodolphebrd]

Bien vu

Par contre nettoyer votre déclaration

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
@media print {
*{
    margin-left: 0px;
   margin-right: 0px;
   margin-top:0px;
   margin-bottom:0px;
 
 }
}

ou

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
@media print {
*{
    margin:0;
   padding:0;
 }
}

et pensez au résolu.
Bonnes pâques.