Design écran différent entre Apache Eclipse et Apache Tomcat (Version 9)

Version imprimable

31/03/2022, 10h18
thtioxine

2 pièce(s) jointe(s)

Design écran différent entre Apache Eclipse et Apache Tomcat (Version 9)

Bonjour
Je développe un site en local (Java , Eclipse). Sur ce site, les pages ont un rendu correcte
Pièce jointe 616515
Lorsque je livre ce site sur le serveur de production (qui n'est pas le même que mon serveur local), le rendu des pages est incorrecte.
Pièce jointe 616516

Je pense, peut être à tort, qu'il y a un paramètre à modifier sur le serveur de prod ais je ne sais pas lequel.

Serveur local : Apache Tomcat 9.0.8, Java 1.8
Serveur Prod : Config identique

Les pages ont leur données de taille en pourcentage et non en pixels.

Cordialement
01/04/2022, 10h59
NoSmoking

Bonjour,
ce n'est pas le serveur qui est responsable de l'affichage de ta page mais le moteur de rendu du navigateur.

Le serveur est par contre responsable du code de ta page via la version du langage utilisé.

Regarde donc le code HTML généré, CTRL +U dans la navigateur, vérifie que tu n'as pas de souci avec la casse pour les noms de fichiers et que les chemins d'accès soit correctement indiqués.
04/04/2022, 23h22
thtioxine

Bonjour
Désolé mais j'étais absent.
Je ferais ça demain.
Merci de ton aide.
Cordialement

2 pièce(s) jointe(s)

Design écran différent

Bonjour
La taille de l'input n'est pas la même alors que les CSS sont totalement identique.
J'ai inspecter l'élément par la trousse à outil de chrome et je ne vois absolument aucune différence entre les 2 écrans hors ce pb.
Serai t'il possible que ce soit un pb de police de caractère ?
Voici la page LOCAL
Pièce jointe 616774
A partir du Serveur Distant
Pièce jointe 616775
Et le code source

Code:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta http-equiv="Pragma" content="no-cache" />
	<title>LOGIN</title>
	<script type="text/javascript" src="/webSIHEL/jslib/websihel.js"></script>
	<link href="/webSIHEL/css/websihel.css" rel="stylesheet" type="text/css" />
	<script>
        function init()
        {
                loginForm.nom.focus();
        }
        
        function soumet() {
                if (myTrim(loginForm.nom.value) != "" && myTrim(loginForm.password.value) != "") {
                        document.getElementById("soumis").style.display="";
                        loginForm.submit();
                        return true;
                }
                else  {
                        alert("Nom et/ou password obligatoire");
                        loginForm.nom.focus();
                        return false;
                }
        }
</script>
 
</head>
<body onload = "init();">
	<center>
	<h3>Login</h3>
	<div id="soumis" style="display:none">Soumission effectuée....Attendez</div>
	<div id="formulaire" style="width:15%">
 
		<form id="loginForm" name="loginForm" action="/webSIHEL/login/login;jsessionid=F1344949C600B23EAABEA7EEFF0CDEA6" method="post" onsubmit="return soumet();">
			<table>
				<tr>
					<td class="label">Nom</td>
					<td colspan="2"><select id="nom" name="nom">
						<option value="">Faites un choix</option>
 
							<option value="Administrateur">Administrateur</option>
 
							<option value="Consultant">Consultant</option>
 
							<option value="Gestionnaire">Gestionnaire</option>
 
					</select></td>
				</tr>
				<tr>
					<td class="label">Password</td>
					<td colspan="2"><input id="password" name="password" type="password" value=""/></td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td><input id="button" type="submit" value="Soumettre"/></td>
					<td><input id="button" type="reset" value="Annuler"/></td>
				</tr>
			</table>
		</form>
 
	</div>
	</center>
</body>
</html>

Cordialement

Plusieurs choses sont à signaler.

• Il apparaît effectivement que les <input type="password"> soit récalcitrant !

• Il nous manquerait le CSS appliqué et surtout celui de la <table>.

• Soyons « moderne », ton entête de fichier devrait ressembler à cela
Code:

1 2 3 4 5 6 7 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ici le titre</title> 
• Les balises <center> sont obsolètes en HTML5, il faut utiliser le CSS.

• Difficile d'admettre que <div id="formulaire" style="width:15%"> soit pertinent, autant ne rien mettre.

• Les IDs doivent être unique.

• Ta construction, sous forme de <table> n'est pas des plus opportunes, des méthodes plus judicieuses existent comme :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <form action="login.php" method="POST"> <h2>Login</h2> <p> <label for="nom">Nom</label> <select id="nom" name="nom"> <option value="">Faites un choix</option> <option value="Administrateur">Administrateur</option> <option value="Consultant">Consultant</option> <option value="Gestionnaire">Gestionnaire</option> </select> </p> <p> <label for="password">Password</label> <input id="password" type="password" name="password"> </p> <p> <input id="send" type="submit" value="Soumettre"> <input id="reset" type="reset" value="Annuler"> </p> </form>
... avec ce simple CSS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 form { width: 20em; margin: auto; padding: 0 1em; border: 1px solid #CCC; } form h2 { text-align: center; } form p { display: flex; justify-content: space-around; } form label { width: 33%; } form input, form select { width: 60%; font: inherit; } form p:last-child input { width: 45%; }
... c'est bien sûr un exemple à affiner.

07/04/2022, 17h43
thtioxine

Design différent

Bonjour
Bon, encore en retard pour la réponse.
Je vais faire les modifs mais je crois que tu as mis le doigt sur le pb. Les id ne sont pas uniques.
Je vais m'empresser de corriger ceci
En tout cas merci de ton aide
Cordialement
12/04/2022, 10h42
thtioxine

2 pièce(s) jointe(s)

Design écran

Bonjour
Modifs effectuées suivant tes recommendations.
Résultat nickel, les 2 écrans sont identiques et propres.
LOCAL
Pièce jointe 617199
DISTANT
Pièce jointe 617200

Merci encore , je vais faire le reste des pages tel que tu le décris

A+