Angular Prime layout

**sekaijin** · 11/02/2019, 17h34

Bonjour

j'ai un pb qui me paraissait simple mais....

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
+------------------------------------------------------------------------+
|                               header fixe                              |
+------+------+------+------+------+------+------+------+------+-------+-+
| col1 | col2 | col3 | col4 | col5 | col5 | col6 | col7 | col8 | col9    |
+------+------+------+------+------+------+------+------+------+-------+-+
| ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...   |^|
+------+------+------+------+------+------+------+------+------+-------+#+
| ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...   |#|
+------+------+------+------+------+------+------+------+------+-------+#+
| ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...  | ...   |v|
+------+------+------+------+------+------+------+------+------+-------+-+
|                               footer fixe                              |
+------------------------------------------------------------------------+

Je cherche à avoir une page sans scroll vertical avec un header fixé en haut et un footer fixé en bas
entre les deux une zone sans scroll qui vient recevoir divers contenus.

jusque là j'ai à peut prêt trouvé des solutions.
c'est là que ça ce corse. lorsque je place un contenu comme un tableau
je voudrais qu'il occupe la totalité de l'espace restant est cela quelque soit le nombre de lignes à afficher.

si c'est un tableau je veux que les entêtes de colonnes soit toujours visible et que seules les lignes de contenues soient scrollable
s'il y a de la pagination je veux qu'elle soit toujours visible.

c'est ça que je ne parvient pas à faire. si je mets height : 100% sur mon tableau quelle que soit la taille de ma fenêtre il n'occupe qu'une petite partie de la zone de contenu
si je mets une taille fixe ça ne s'adapte plus à l'écran de l'utilisateur.

j'utilise Angular 7 et PrimeNG. contrairement à d'autre framework qui offre ce genre de layout clef en main (sans avoir de css ou de code à écrire)
je n'ai pas trouvé comment faire avec Angular et primeNG. Je n'ai rien trouvé ni dans Angular ni dans PrimeNG. les rares solutions qui tentent de répondre à ce problème que j'ai trouvé propose une zone de contenu scrollable et sont fait à base de CSS. mais dans ce cas c'est toute ma table qui scrolle et pas seulement les lignes de tableau.

Jai trouvé dans p-tabe de Prime l'option pour le scroll des lignes mais la table n'occupe jamais tout l'espace

si quelqu'un à une piste.

merci de votre aide
A+JYT

**NoSmoking** · 13/02/2019, 19h13

Bonjour,
si tu maitrises les hauteurs de tes éléments <header> et <footer> tu peux avantageusement utiliser la fonction CSS calc pour calculer la hauteur du <body> scrollable.

L'ensemble est réalisable en CSS pur.

Mais je ne suis pas sûr que cela soit adaptable en cas de pagination gérée par primeNG.

**sekaijin** · 15/02/2019, 20h41

Merci
je ne connais pas la fonction cal de css
je vais regarder ça

A+JYT

**sekaijin** · 17/02/2019, 19h00

Full CSS merci pour la suggestion

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
<html>
	<head>
		<title>test</title>
		<style>
                        body {
                                font-size: 20;
                        }
                        header {
                                height: 25;
                                border: 1px solid blue;
                                
                        }
                        footer {
                                height: 25;
                                border: 1px solid red;
                        }                       
                        .contents {
                                height: calc(100% - 56px);
                                border: 1px solid green;
                        }
                        table {
                                height: 100%;
                                width: 100%;
                                border-spacing: 0;
                                border-collapse: collapse;
                                border: 1px solid black;
                                table-layout: fixed;
                        }
                        tbody, thead tr, tfoot tr {
                                display: block; 
                                height: 15px;
                        }
                        table, th, td {
                                width: 300px;
                                border: 1px solid black;
                                font-size: 10px;
                                padding: 0;
                                margin: 0;
                        }
                        tbody {
                                height: 100%; 
                        overflow-y: scroll;    /* Trigger vertical scroll    */
                                overflow-x: hidden;  /* Hide the horizontal scroll */
                        }
                </style>
	</head>
	<body>
		<header>the header</header>
		<div class="contents">
			<div>
				<table>
					<thead>
						<tr><th>col 1</th><th>col 2</th></tr>
					</thead>
					<tbody>
						<tr><td>val 1</td><td>val 2</td></tr>
						<tr><td>val 1</td><td>val 2</td></tr>
						<tr><td>val 1</td><td>val 2</td></tr>
						<tr><td>val 1</td><td>val 2</td></tr>
....
					</tbody>
					<tfoot>
						<tr><td colspan="2">table foot</td></tr>
					</tfoot>
				</table>
 
			</div>
		</div>
		<footer>the footer</footer>	
	</body>
</html>

un petit bricolage pour donner la piste.

**NoSmoking** · 18/02/2019, 10h18

Pas regardé plus avant ton code mais une remarque toutefois

Code css :

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

1
2
3
body {
  font-size: 20;
}

il manque l'unité et cela peut faire toute la différence, donc à rajouter partout où elle manque.

Code css :

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

1
2
3
body {
    font-size: 20px;  /* même si en rem ou em c'est mieux */
}

**sekaijin** · 18/02/2019, 21h18

merci j'ai effectivement vu qu'il manquait des unités dans header et footer aussi

A+JYT

Angular Prime layout

Angular

Discussions similaires

Partager

Partager