Bonjour,
Merci pour votre réponse.
Sur le code suivant :
input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input.mon-input-machin {
width: 180px;
}
Je ne trouve pas beaucoup de doc la dessus, est ce que ce ode est pris en compte avec les anciennes versions des navigateurs ?
J'avais essayé au debut de positionner en relative mais j'ai eu un problème de depassement de zone sur la droite, j ai donc tout fixé en absolute.
Ce qui me gène dans le WIDTH de chaque INPUT c'est de savoir quelle largeur je dois mettre, d autant que j'ai des dizaines de formulaires déja fait et qui ont un paquet de zones INPUT.
L avantage du SIZE c est que c'est beaucoup plus facile, il est vraiment regretable que seul Chrome fasse un affichage différent car avec IE 7 8 9 10, Safari et Firefox aucun soucis.
C'est pour ça que je cherchais une solution plus simple que le WIDTH.
kustolovic a écrit :
Difficile de ne pas réagir ici devant les problèmes de ce code:
– Pas de labels: au lieu de span class="libelle1" utiliser <label for="bi_cp">
Le fait de ne pas mettre de label n'est pas un problème, car comme vous le voyez sur la copie d'écran les zones sont fermées, seules les zones ouvertes ont un label, c'est pour cela que vous ne les voyez pas, mais quand les zones sont ouvertes le LABEL Figure bien.
kustolovic a écrit :
– Les attributs fantaisistes comme obligatoire ou onglet n'existent bien évidemment pas. Pour stocker des métadonnées dans des attributs, en HTML5 on peut désormais utiliser les attributs personnalisés sous la forme data-*, donc cela donnera data-tab="page1" au lieu de onglet="page1". (j'ai mis en anglais car ce genre de trucs en français me hérissent le poil! Mais ce n'est pas interdit Smiley langue )
Ces attributs fantaisistes me sont indispensables car ils apportent des fonctionnalités qui n'existent pas, comme la duplication de zone par exemple, le nom de l'onglet ou ils sont positionnés ou le controle de zone obligatoire.
Quand au genre de truc qui hérissent, c'est chacun ses gouts, heureusement que j'écris pas en chinois (pointe d'humour).
Ces attributs fantaisistes fonctionnent parfaitement avec tous les navigateurs (sauf peu être ceux qui date de la préhistoire) et c'est déja pas mal...
Est ce que data- est pris en compte dans les anciens navigateurs, si oui il m'est trés facile de corriger ?
kustolovic a écrit :
– Les styles en ligne, si possible éviter, c'est une horreur pour la maintenabilité.
C'est trés pratique de pouvoir associer des zones avec la meme classe et de rajouter un style pour les différencier, il n y a aucun problème pour la maintenabilité, pas plus que d'aller chercher dans un fichier la classe correspondante pour voir ses propriétés.
kustolovic a écrit :
– font-family: "verdana" Et si on ne l'a pas?
C'est un minimum non ? a moins que l utilisateur l'ai supprimé de son système, ce qui est alors embétant pour toutes polices...
kustolovic a écrit :
– font-size: 12px; Sortez vos loupes!
Comme vous le savez les sites professionnels, comme des extranet ou autres doivent fonctionner sous plusieurs résolutions, le minimum étant 1024 x 768 car pas tout le monde à une télé 16/9 de 115 cm en guise d'écran.
On ne sait jamais quel est la taille de l'écran de la personne qui se connecte.
Comment voulez vous avoir une police écran non loupe qui tienne dans cette résolution ?
Si la résolution est de 2048 x 1024 par exemple il suffit de faire un zoom de 135% dans le navigateur pour ne pas avoir besoin de loupe, l'inverse est beaucoup plus embetant.
Pour revenir sur mon problème il faut que je vous explique comment je procède.
J'ai développé un gestionnaire de menu permettant de gérer plusieurs applications, il est composé de plusieurs formulaires destinés à gérer les système, comme par exemple un gestionnaire de menu, un gestionnaire d'aide, un gestionnaire d'accès, un gestionnaire de paramètres, etc... en plus des applications spécifiques.
Voici une capture d'écran du menu :
Tous les formulaires qui sont crées appelent des fonctions pour générer des zones INPUTS de tous types (SELECT, CHECKBOX, TEXTAREA, etc...) et qui permettent d'avoir une maintenance trés facile en cas de problème.
Voici un exemple de code avec le champs Code postal comme dans l exemple :
call zone_libelle("",bi_cp,"libelle1")
call zone_input(0,"position:absolute;left:120px;",bi_cp,"")
qui génère :
<span title='Zone non modifiable' class='libelle1' >Code postal</span><input style='position:absolute;left:120px;' class='input_saisieread' tabindex='5' type='text' id='bi_cp' tabulation='' obligatoire='0' onglet='page1' title='Code postal' value="" maxlength='5' size='5' readonly />
Vous voyez que c'est trés facile pour la maintenance et les futures évolutions, car il me suffit de modifier les fonctions zone_libelle et zone_input, mais il y a aussi un tas d'autres fonctions comme la fermeture ou l ouverture des zones, la réinitialisation ou la duplication.
Je pourrais générer dynamiquement le WIDTH mais je ne sais pas comment faire.
J'ai essayé de faire un calcul avec le nombre de caractère (SIZE) multiplié par une largeur de pixel mais cela n'a rien donné ou alors je m y suis mal pris...
En tout cas merci pour votre aide, je vais étudier d'autres pistes car la seule astuce a été de soustraire un caractère de la balise SIZE si le navigateur est Chrome.
Bon dimanche.
Modifié par Razmote (20 Nov 2015 - 14:32)
)