Dompdf v2.0.0 : clear both ne marche pas

**merou19** · 26/06/2022, 11h24

Bonjour à tous,

J'ai une page avec un header et un footer avec 2 parties en float left et right :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<html>
    <head>
        <style>
            body {
                font-family: Verdana, Arial, sans-serif;
                height: 100%;
            }
            #content {
                                position: fixed;
                /* clear: both; */
                margin: 30px;
                margin-top: 80px;
                                margin-bottom: 200px;
                background-color: red;
            }
            hr {
                margin-left: 30px;
                margin-right: 30px;            
            }
            @page {
                margin: 80px 1px;
            }
            #header {
                position: fixed;
                left: 0px;
                right: 0px;
                top: 0px;
                height: 40px;
                background-color: orange;
                text-align: center;
                margin-top: 30px;
            }
            #footer {
                position: fixed;
                left: 0px;
                right: 0px;
                bottom: 0px;
                height: 80px;
                                background-color: yellow;
            }
            #footer-gauche {
                float: left;
                text-align: left;
                margin-left: 50px;
                background-color: lightblue;
            }
            #footer-droite {
                float: right;
                text-align: right;
                margin-right: 50px;
                background-color: green;
            }
            #footer-droite #page:after {
                content: counter(page, decimal);
            }
        </style>
    </head>
    <body>
        <div id="header">
            Entête
            <hr>
        </div>
        <div id="footer">
            <hr>
            <div id="footer-gauche">Pied gauche</div>
            <div id="footer-droite"><div id="page">Page </div></div>
        </div>
        <div id="content">
            Bla bla bla<br>
			Bla bla bla<br>
			Bla bla bla<br>
			Bla bla bla<br>
			Bla bla bla<br>
			Bla bla bla<br>
			Bla bla bla<br>
			Bla bla bla<br>
        </div>
    </body>
</html>

J'affiche ce code dans mon navigateur : tout est OK, je n'ai pas besoin du "clear both" dans content.

Nom : Capture1.JPG
Affichages : 618
Taille : 27,0 Ko

J'ajoute "clear both" et j'affiche ce code par Dompdf, et dans mon pdf généré, mon content en rouge prend à gauche la marge de mon pied gauche.

Nom : Capture2.JPG
Affichages : 652
Taille : 33,8 Ko

Nom : Capture2.JPG
Affichages : 652
Taille : 33,8 Ko

J'ai l'impression que seul le float right est annulé, et pas le float left.
J'utilise la version 2.0.0 de Dompdf.
Avec mes recherches, j'ai vu ce problème il y a des années avec la version 0.7, problème qui semble avoir été résolu depuis.

Vous voyez ce qui cloche dans mon code ?
Vous avez des idées ?

Merci d'avance pour votre aide !

**NoSmoking** · 27/06/2022, 17h30

Bonjour,

J'ajoute "clear both" et j'affiche ce code par Dompdf, et dans mon pdf généré, mon content en rouge prend à gauche la marge de mon pied gauche.

quel est le but rechercher ?

**merou19** · 27/06/2022, 18h28

Bonjour,

En effet, ma demande n'est peut être pas assez claire, désolé !

Je veux mon pdf sans la marge de gauche pour le content.
Donc que les 2 float (right et left) du pied soient annulés.

J'essaie mon code dans une page html, dans un navigateur : c'est ok.
j'essaie le même code dans dompdf, dans mon pdf généré : le content prend comme marge de gauche la largeur de mon pied en float left.

Je veux dans mon pdf avoir le même aspect que dans mon html.
En recherchant, j'ai découvert le code css :

Code :

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

clear: both;

Mais même avec ce code en plus pour mon pdf, je n'ai pas le résultat comme le html.

Peut être qu'il y a d'autres moyens de faire, si vous avez des idées, je suis preneur !
Merci pour votre aide !

**mathieu** · 27/06/2022, 19h09

le code html est fait pour être lu par un moteur de rendu html et même dans ce cas, il y a des différences de résultat suivant les navigateurs.

donc si vous avez besoin d'avoir un fichier pdf précis, je vous conseille de ne pas passer par de l'html mais de générer directement le pdf. si vous utilisez php, cela peux se faire avec la bibliothèque suivante par exemple :
http://fpdf.org/

**merou19** · 27/06/2022, 21h16

En effet, le rendu peut être différent selon les navigateurs, donc d'autant plus par les convertisseurs vers pdf

Merci pour l'idée de fpdf, je ne m'étais jamais penché dessus.

Mon site est en Symfony 5, et je viens de faire un tour sur Packagist, il y a plusieurs bundles, et mêmes des html2pdf, pour créer des pdf. Là dans l'immédiat, je ne sais pas lequel choisir, je vais regarder les docs en fonction de mes besoins, et créerai un nouveau sujet dans le forum Symfony si besoin...

Merci encore à vous !

**NoSmoking** · 30/06/2022, 09h01

Donc que les 2 float (right et left) du pied soient annulés.

pour annuler :

Code :

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

1
2
3
selecteur {
  float: none;
}

**merou19** · 30/06/2022, 21h33

Yes, c'est mieux, merci beaucoup !

ça m'a permis de me rendre compte que c'était mon page:after qui provoquait aussi des décalages.

Voilà où j'en suis :
J'ai mis un float: none dans content et dans #page:after.
Et j'ai supprimé le float: left dans #footer-gauche.

Voilà ce que ça donne :

Nom : Capture3.JPG
Affichages : 557
Taille : 39,7 Ko

Nom : Capture3.JPG
Affichages : 557
Taille : 39,7 Ko

Le pied est donc sur 2 lignes, mais je ne trouve pas mieux, je peux m'en contenter...

Pour ceux que ça intéresse, voici mon code :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<html>
    <head>
        <style>
            body {
                font-family: Verdana, Arial, sans-serif;
                height: 100%;
            }
            #content {
                float: none;
                margin: 30px;
                margin-top: 80px;
                                margin-bottom: 200px;
                background-color: red;
            }
            hr {
                margin-left: 30px;
                margin-right: 30px;            
            }
            @page {
                margin: 80px 1px;
            }
            #header {
                position: fixed;
                left: 0px;
                right: 0px;
                top: 0px;
                height: 40px;
                background-color: orange;
                text-align: center;
                margin-top: 30px;
            }
            #footer {
                position: fixed;
                left: 0px;
                right: 0px;
                bottom: 0px;
                height: 80px;
                                background-color: yellow;
            }
            #footer-gauche {
                /* float: left; */
                text-align: left;
                margin-left: 50px;
                background-color: lightblue;
            }
            #footer-droite {
                float: right;
                text-align: right;
                margin-right: 50px;
                background-color: green;
            }
            #footer-droite #page:after {
                content: counter(page, decimal);
                float: none;
            }
        </style>
    </head>
    <body>
        <div id="header">
            Entête
            <hr>
        </div>
        <div id="footer">
            <hr>
            <div id="footer-gauche">Pied gauche</div>
            <div id="footer-droite"><div id="page">Page </div></div>
        </div>
        <div id="content">
            Bla bla bla<br>
			Bla bla bla<br>
			Bla bla bla<br>
			Bla bla bla<br>
			Bla bla bla<br>
			Bla bla bla<br>
			Bla bla bla<br>
			Bla bla bla<br>
        </div>
    </body>
</html>

Dompdf v2.0.0 : clear both ne marche pas

CSS

Discussions similaires

Partager

Partager