{"id":16537,"date":"2024-01-18T22:02:57","date_gmt":"2024-01-18T22:02:57","guid":{"rendered":"https:\/\/www.directimpactsolutions.com\/4-astuces-pour-des-modeles-claris-filemaker-au-pixel-pres\/"},"modified":"2024-09-06T01:06:36","modified_gmt":"2024-09-06T01:06:36","slug":"modeles-claris-filemaker-au-pixel-pres","status":"publish","type":"post","link":"https:\/\/www.directimpactsolutions.com\/fr\/modeles-claris-filemaker-au-pixel-pres\/","title":{"rendered":"4 astuces pour des mod\u00e8les Claris FileMaker au pixel pr\u00e8s"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><nav><ul><li class=\"\"><a href=\"#formatting-claris-file-maker-layouts-is-a-slippery-slope\">Le formatage de mod\u00e8le est une pente glissante<\/a><ul><li class=\"\"><a href=\"#1-ensure-equal-text-alignment-for-label-field\">1. Veillez \u00e0 ce que l&rsquo;alignement du texte soit identique pour l&rsquo;\u00e9tiquette et le champ<\/a><\/li><li class=\"\"><a href=\"#2-use-equal-width-padding-make-padding-symmetric\">2. Utiliser une largeur et un rembourrage (\u201cpadding\u201d) \u00e9gaux ; rendre le rembourrage sym\u00e9trique<\/a><\/li><li class=\"\"><a href=\"#3-avoid-center-aligning-label-or-field-vertically\">3. \u00c9vitez de centrer l&rsquo;\u00e9tiquette ou la rubrique verticalement3. \u00c9vitez de centrer l&rsquo;\u00e9tiquette ou la rubrique verticalement<\/a><\/li><li class=\"\"><a href=\"#4-in-form-view-adjust-label-height-to-touch-field\">4. Dans la vue formulaire, ajustez la hauteur de l&rsquo;\u00e9tiquette pour toucher la rubrique<\/a><\/li><\/ul><\/li><li class=\"\"><a href=\"#conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div><h2 class=\"wp-block-heading\" id=\"formatting-claris-file-maker-layouts-is-a-slippery-slope\" style=\"font-style:normal;font-weight:400\">Le formatage de mod\u00e8le est une pente glissante<\/h2><p>Cr\u00e9er un mod\u00e8le parfait au pixel pr\u00e8s est difficile. Il est encore plus difficile de le conserver dans toutes les versions futures. J&rsquo;ai pass\u00e9 des tonnes de temps \u00e0 positionner soigneusement chaque objet pour que la mise en page soit parfaite. Puis, d\u00e8s que je mets \u00e0 jour le contenu d&rsquo;une \u00e9tiquette ou que je modifie l&rsquo;orientation du texte d&rsquo;une paire \u00e9tiquette-rubrique, la perfection dispara\u00eet.<\/p><p>Savez-vous ce qu&rsquo;il y a de plus fou \u00e0 maintenir un mod\u00e8le au pixel pr\u00e8s ? Une fois que vous avez laiss\u00e9 la mise en page glisser une fois, de fa\u00e7on consciente, c&rsquo;est fini. Vous ne vous en souciez plus. Elle ne sera plus jamais parfaite. Nous avons tous de nombreuses t\u00e2ches \u00e0 accomplir, nous sommes tous fatigu\u00e9s et nous avons tous tendance \u00e0 oublier une ou deux choses. C&rsquo;est tout \u00e0 fait normal.<\/p><p>Quelle est la meilleure fa\u00e7on de s&rsquo;assurer que nous ne laisserons pas tomber la mise en page ? Je dirais que le meilleur moyen est de minimiser le travail de maintenance que nous devons effectuer. Moins il y a d&rsquo;\u00e9tapes \u00e0 ex\u00e9cuter pour maintenir la perfection et plus ces \u00e9tapes sont simples, moins il y a de chances que nous laissions tomber la mise en page.<\/p><p>Dans cet article, j&rsquo;aimerais donc partager avec vous quelques conseils de base mais utiles qui vous aideront \u00e0 minimiser les \u00e9tapes n\u00e9cessaires \u00e0 la cr\u00e9ation et, plus important encore, au maintien d&rsquo;une mise en page parfaite au pixel pr\u00e8s, en particulier avec le patron de mod\u00e8le le plus courant : une paire <strong>\u00e9tiquette-rubrique dispos\u00e9 verticalement<\/strong>.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-1.png\" alt=\"Exemple de mod&#xE8;le Claris FileMaker\"\/><figcaption class=\"wp-element-caption\">une paire \u00e9tiquette-champ \u00e0 la verticale<\/figcaption><\/figure><h3 class=\"wp-block-heading has-ast-global-color-2-color has-text-color\" id=\"1-ensure-equal-text-alignment-for-label-field\">1. Veillez \u00e0 ce que l&rsquo;alignement du texte soit identique pour l&rsquo;\u00e9tiquette et le champ<\/h3><p>Dans le cas d\u2019une paire <strong>\u00e9tiquette-rubrique \u00e0 la verticale<\/strong>, en r\u00e8gle g\u00e9n\u00e9rale, votre \u00e9tiquette doit \u00eatre align\u00e9e \u00e0 gauche si votre rubrique est align\u00e9e \u00e0 gauche. Si votre rubrique est align\u00e9e \u00e0 droite, votre \u00e9tiquette doit \u00eatre align\u00e9e \u00e0 droite.<\/p><p>Vous ne voulez pas que votre rubrique soit align\u00e9e \u00e0 gauche mais que l&rsquo;\u00e9tiquette soit align\u00e9e \u00e0 droite, et que vous positionniez m\u00e9ticuleusement l&rsquo;\u00e9tiquette pour qu&rsquo;elle ait l&rsquo;air align\u00e9e avec le champ, comme illustr\u00e9 ci-dessous. C&rsquo;est ce que je vois souvent dans les anciennes applications.<\/p><div class=\"wp-block-uagb-image uagb-block-a8dce4a6 wp-block-uagb-image--layout-default wp-block-uagb-image--effect-static wp-block-uagb-image--align-none\"><figure class=\"wp-block-uagb-image__figure\"><img decoding=\"async\" srcset=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-2.png ,https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-2.png 780w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-2.png 360w\" sizes=\"auto, (max-width: 480px) 150px\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-2.png\" alt=\"Mises en page Claris FileMaker communes\" class=\"uag-image-16483\" width=\"365\" height=\"89\" title=\"\" loading=\"lazy\"><\/figure><\/div><p>Ne faites pas cela<\/p><p>Si votre alignement ressemble \u00e0 l&rsquo;image ci-dessus, vous devrez repositionner l&rsquo;\u00e9tiquette pour r\u00e9aligner le texte lorsque vous la mettrez \u00e0 jour.<\/p><div class=\"wp-block-uagb-image uagb-block-21a3ca1b wp-block-uagb-image--layout-default wp-block-uagb-image--effect-static wp-block-uagb-image--align-none\"><figure class=\"wp-block-uagb-image__figure\"><img decoding=\"async\" srcset=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-3.png ,https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-3.png 780w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-3.png 360w\" sizes=\"auto, (max-width: 480px) 150px\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-3.png\" alt=\"\" class=\"uag-image-16486\" width=\"360\" height=\"83\" title=\"\" loading=\"lazy\"><\/figure><\/div><p>Le simple fait de remplacer le L majuscule par un L minuscule g\u00e2che tout<\/p><p>En conservant le m\u00eame alignement du texte, vous vous \u00e9pargnez beaucoup de travail lorsque vous devez proc\u00e9der \u00e0 des ajustements, surtout si vous combinez cette astuce avec la suivante.<\/p><h3 class=\"wp-block-heading has-ast-global-color-2-color has-text-color\" id=\"2-use-equal-width-padding-make-padding-symmetric\">2. Utiliser une largeur et un rembourrage (\u201cpadding\u201d) \u00e9gaux ; rendre le rembourrage sym\u00e9trique<\/h3><p>Cette astuce est utile lorsque vous avez un m\u00e9lange de rubriques align\u00e9s \u00e0 gauche et \u00e0 droite, comme dans une liste.<\/p><p>Le fait de donner \u00e0 votre \u00e9tiquette et \u00e0 votre rubrique les m\u00eames rembourrages facilite l&rsquo;alignement de leur contenu textuel, car maintenant, tant que leurs bords s&rsquo;alignent, leur texte s&rsquo;aligne (en supposant que vous ayez \u00e9galement adopt\u00e9 le conseil #1 et qu&rsquo;il n&rsquo;y ait pas de bordures super larges).<\/p><p>Pourquoi leur donner la m\u00eame largeur et un rembourrage sym\u00e9trique ? Ces deux habitudes sont utiles lorsque vous travaillez avec une liste, que ce soit dans la vue Liste ou dans une table externe. Il est courant d&rsquo;avoir des rubriques align\u00e9es \u00e0 gauche et \u00e0 droite dans une liste.<\/p><div class=\"wp-block-uagb-image uagb-block-58500d42 wp-block-uagb-image--layout-default wp-block-uagb-image--effect-static wp-block-uagb-image--align-none\"><figure class=\"wp-block-uagb-image__figure\"><img decoding=\"async\" srcset=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-4.png ,https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-4.png 780w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-4.png 360w\" sizes=\"auto, (max-width: 480px) 150px\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-4.png\" alt=\"exemple de mise en page\" class=\"uag-image-16489\" width=\"760\" height=\"267\" title=\"\" loading=\"lazy\"><\/figure><\/div><p>Il est courant d&rsquo;avoir une liste avec des rubriques align\u00e9es \u00e0 gauche et \u00e0 droite<\/p><p>Il est tr\u00e8s courant de copier une paire \u00e9tiquette-rubrique pour en cr\u00e9er plusieurs, ou d&rsquo;utiliser le s\u00e9lecteur de rubrique sur la gauche pour faire glisser et d\u00e9poser plusieurs rubrique ensemble sur le mod\u00e8le. Quoi qu&rsquo;il en soit, votre texte sera align\u00e9 de la m\u00eame mani\u00e8re avec ces deux m\u00e9thodes.<\/p><p>Supposons que toutes vos \u00e9tiquettes et rubriques soient d\u00e9sormais align\u00e9es \u00e0 gauche, mais que vous souhaitiez en modifier certaines pour les aligner \u00e0 droite. S&rsquo;ils ont d\u00e9j\u00e0 la m\u00eame largeur et un rembourrage sym\u00e9trique, il vous suffit de modifier l&rsquo;alignement de leur texte, et le tour est jou\u00e9.<\/p><div class=\"wp-block-uagb-image uagb-block-b88a879f wp-block-uagb-image--layout-default wp-block-uagb-image--effect-static wp-block-uagb-image--align-none\"><figure class=\"wp-block-uagb-image__figure\"><img decoding=\"async\" srcset=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-5.png ,https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-5.png 780w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-5.png 360w\" sizes=\"auto, (max-width: 480px) 150px\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-5.png\" alt=\"\" class=\"uag-image-16492\" width=\"188\" height=\"108\" title=\"\" loading=\"lazy\"><\/figure><\/div><div class=\"wp-block-uagb-image uagb-block-de1746b2 wp-block-uagb-image--layout-default wp-block-uagb-image--effect-static wp-block-uagb-image--align-none\"><figure class=\"wp-block-uagb-image__figure\"><img decoding=\"async\" srcset=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-6.png ,https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-6.png 780w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-6.png 360w\" sizes=\"auto, (max-width: 480px) 150px\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-6.png\" alt=\"\" class=\"uag-image-16495\" width=\"189\" height=\"111\" title=\"\" loading=\"lazy\"><\/figure><\/div><p>Une action, changer l&rsquo;alignement du texte, et c&rsquo;est fait<\/p><p>Dans le cas contraire, consid\u00e9rez le cas suivant (tr\u00e8s courant) : l&rsquo;\u00e9tiquette est plus courte que la rubrique, le remplissage gauche est sup\u00e9rieur \u00e0 0, mais le remplissage droit est \u00e9gal \u00e0 0. En mode navigation, ce cas de figure est identique au sc\u00e9nario ci-dessus. Mais pour modifier l&rsquo;alignement du texte \u00e0 droite, je dois.. :<\/p><ol class=\"wp-block-list\" start=\"1\"><li>Mettre \u00e0 jour l&rsquo;alignement du texte pour qu&rsquo;il soit align\u00e9 \u00e0 droite.<\/li>\n\n<li>Aligner le bord droit de l&rsquo;\u00e9tiquette sur le bord droit du champ.<\/li>\n\n<li>Ajouter un remplissage \u00e0 droite de l&rsquo;\u00e9tiquette et de la rubrique.<\/li><\/ol><div class=\"wp-block-uagb-image uagb-block-ca5dc5a9 wp-block-uagb-image--layout-default wp-block-uagb-image--effect-static wp-block-uagb-image--align-none\"><figure class=\"wp-block-uagb-image__figure\"><img decoding=\"async\" srcset=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-7.png ,https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-7.png 780w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-7.png 360w\" sizes=\"auto, (max-width: 480px) 150px\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-7.png\" alt=\"\" class=\"uag-image-16498\" width=\"421\" height=\"486\" title=\"\" loading=\"lazy\"><\/figure><\/div><p>Pour modifier l&rsquo;alignement du texte \u00e0 droite, nous devons proc\u00e9der en trois \u00e9tapes<\/p><p>Comme je l&rsquo;ai mentionn\u00e9 au d\u00e9but de l&rsquo;article, moins il y a d&rsquo;\u00e9tapes \u00e0 effectuer, plus vous avez de chances de conserver une mise en page au pixel pr\u00e8s. Une seule \u00e9tape est donc pr\u00e9f\u00e9rable \u00e0 trois.<\/p><h3 class=\"wp-block-heading has-ast-global-color-2-color has-text-color\" id=\"3-avoid-center-aligning-label-or-field-vertically\">3. \u00c9vitez de centrer l&rsquo;\u00e9tiquette ou la rubrique verticalement3. \u00c9vitez de centrer l&rsquo;\u00e9tiquette ou la rubrique verticalement<\/h3><p>L&rsquo;objectif est de minimiser le mouvement du texte lorsque nous agrandissons une \u00e9tiquette ou une rubrique.<\/p><p>Par d\u00e9faut, de nombreux th\u00e8mes FileMaker utilisent l&rsquo;alignement vertical pour le texte et les rubriques. Remplacez-les par un alignement par le haut \u00e0 moins que vous n&rsquo;ayez un cas d&rsquo;utilisation sp\u00e9cifique pour l&rsquo;alignement central.<\/p><p>Lorsque l&rsquo;objet est align\u00e9 verticalement au centre, l&rsquo;\u00e9tirement de l&rsquo;objet en hauteur entra\u00eene le d\u00e9placement du texte vers le bas.<\/p><p>Dans le cas d&rsquo;une \u00e9tiquette, \u00e9tant donn\u00e9 que l&rsquo;\u00e9tiquette se trouve au-dessus du champ, le fait de rendre l&rsquo;\u00e9tiquette plus grande modifie la position relative de son texte par rapport au texte du champ. Vous avez maintenant une paire d&rsquo;objets dont l&rsquo;aspect est diff\u00e9rent des autres.<\/p><div class=\"wp-block-uagb-image uagb-block-359aa893 wp-block-uagb-image--layout-default wp-block-uagb-image--effect-static wp-block-uagb-image--align-none\"><figure class=\"wp-block-uagb-image__figure\"><img decoding=\"async\" srcset=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-8.png ,https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-8.png 780w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-8.png 360w\" sizes=\"auto, (max-width: 480px) 150px\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-8.png\" alt=\"\" class=\"uag-image-16501\" width=\"198\" height=\"89\" title=\"\" loading=\"lazy\"><\/figure><\/div><div class=\"wp-block-uagb-image uagb-block-554c87f8 wp-block-uagb-image--layout-default wp-block-uagb-image--effect-static wp-block-uagb-image--align-none\"><figure class=\"wp-block-uagb-image__figure\"><img decoding=\"async\" srcset=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-9.png ,https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-9.png 780w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-9.png 360w\" sizes=\"auto, (max-width: 480px) 150px\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-9.png\" alt=\"\" class=\"uag-image-16504\" width=\"191\" height=\"87\" title=\"\" loading=\"lazy\"><\/figure><\/div><p>Mais si l&rsquo;\u00e9tiquette est align\u00e9e en haut, le fait de l&rsquo;\u00e9tirer ne modifie pas son aspect en mode Utilisation.<\/p><div class=\"wp-block-uagb-image uagb-block-dcb2bbf8 wp-block-uagb-image--layout-default wp-block-uagb-image--effect-static wp-block-uagb-image--align-none\"><figure class=\"wp-block-uagb-image__figure\"><img decoding=\"async\" srcset=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-10.png ,https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-10.png 780w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-10.png 360w\" sizes=\"auto, (max-width: 480px) 150px\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-10.png\" alt=\"\" class=\"uag-image-16507\" width=\"203\" height=\"97\" title=\"\" loading=\"lazy\"><\/figure><\/div><div class=\"wp-block-uagb-image uagb-block-92cf5219 wp-block-uagb-image--layout-default wp-block-uagb-image--effect-static wp-block-uagb-image--align-none\"><figure class=\"wp-block-uagb-image__figure\"><img decoding=\"async\" srcset=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-11.png ,https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-11.png 780w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-11.png 360w\" sizes=\"auto, (max-width: 480px) 150px\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Claris-Format-11.png\" alt=\"\" class=\"uag-image-16510\" width=\"194\" height=\"91\" title=\"\" loading=\"lazy\"><\/figure><\/div><p>Une rubrique texte align\u00e9e par le haut peut servir \u00e0 la fois \u00e0 saisir une ligne de donn\u00e9es (par exemple un nom) ou plusieurs lignes de donn\u00e9es (par exemple une description). Il vous suffit de l&rsquo;\u00e9tirer en hauteur pour qu&rsquo;elle conserve son positionnement relatif par rapport \u00e0 tous les autres objets de la mise en page.<\/p><h3 class=\"wp-block-heading has-ast-global-color-2-color has-text-color\" id=\"4-in-form-view-adjust-label-height-to-touch-field\">4. Dans la vue formulaire, ajustez la hauteur de l&rsquo;\u00e9tiquette pour toucher la rubrique<\/h3><p>Cette astuce s&rsquo;inscrit dans le prolongement de l&rsquo;astuce n\u00b0 3. L&rsquo;un des grands d\u00e9fis auxquels j&rsquo;ai vu des d\u00e9veloppeurs d\u00e9butants \u00eatre confront\u00e9s est de maintenir le positionnement d&rsquo;une \u00e9tiquette et d&rsquo;un champ coh\u00e9rent sur de nombreuses paires, que ce soit sur le m\u00eame mod\u00e8le ou sur plusieurs mod\u00e8les diff\u00e9rents.<\/p><p>De nombreux d\u00e9veloppeurs font des calculs mentaux lorsqu&rsquo;ils positionnent ces paires \u00e9tiquette-rubrique pour qu&rsquo;elles restent coh\u00e9rentes. Vous pouvez aussi le dire \u00e0 voix haute : \u00ab\u00a0Le bas de cette \u00e9tiquette est \u00e0 576 pt. Il est cens\u00e9 \u00eatre \u00e0 4 pt au-dessus du champ. Le haut du champ devrait donc \u00eatre \u00e0 580 pt. Il est actuellement \u00e0 578, je vais donc devoir appuyer deux fois sur la touche fl\u00e8che vers le bas&#8230;\u00a0\u00bb<\/p><p>Avez-vous fait cela ? Vous savez que vous l&rsquo;avez fait <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pf-emoji-service--cdn.us-east-1.prod.public.atl-paas.net\/standard\/caa27a19-fc09-4452-b2b4-a301552fd69c\/32x32\/1f609.png\" alt=\":wink:\" width=\"20\" height=\"20\"\/> .<\/p><p>Quelle est la meilleure solution ? En supposant que vous ayez suivi le conseil n\u00b0 3, si vous souhaitez que la distance verticale entre le texte de l&rsquo;\u00e9tiquette et le texte de la rubrique soit coh\u00e9rente, il vous suffit de trouver une paire et de la positionner de mani\u00e8re \u00e0 ce qu&rsquo;elle soit correcte, puis d&rsquo;ajuster la hauteur de l&rsquo;\u00e9tiquette jusqu&rsquo;\u00e0 ce que son bord inf\u00e9rieur touche le bord sup\u00e9rieur de la rubrique.<\/p><p>Pourquoi le bord inf\u00e9rieur doit-il toucher le bord sup\u00e9rieur de la rubrique ? Parce que FileMaker dispose d&rsquo;une fonction g\u00e9niale appel\u00e9e Guides dynamiques. Gr\u00e2ce aux guides dynamiques, il est facile de faire en sorte que le bord inf\u00e9rieur de l&rsquo;\u00e9tiquette touche le bord sup\u00e9rieur d&rsquo;une rubrique. Vous pouvez le faire par glisser-d\u00e9poser sans avoir \u00e0 ajuster pr\u00e9cis\u00e9ment les pixels ; elles s&#8217;embo\u00eetent comme des aimants.<\/p><div class=\"wp-block-uagb-image uagb-block-ce1eb4cb wp-block-uagb-image--layout-default wp-block-uagb-image--effect-static wp-block-uagb-image--align-none\"><figure class=\"wp-block-uagb-image__figure\"><img decoding=\"async\" srcset=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Screen-Shot-2024-01-18-at-2.05.11-PM.png ,https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Screen-Shot-2024-01-18-at-2.05.11-PM.png 780w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Screen-Shot-2024-01-18-at-2.05.11-PM.png 360w\" sizes=\"auto, (max-width: 480px) 150px\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/Screen-Shot-2024-01-18-at-2.05.11-PM.png\" alt=\"\" class=\"uag-image-16513\" width=\"284\" height=\"540\" title=\"\" loading=\"lazy\"><\/figure><\/div><p>Comment activer les guides dynamiques<\/p><p>Si vous disposez d&rsquo;un grand nombre de paires \u00e9tiquette-rubrique et qu&rsquo;une paire semble correcte et touche le bord, vous pouvez s\u00e9lectionner toutes les \u00e9tiquettes du mod\u00e8le et leur donner la m\u00eame hauteur que l&rsquo;\u00e9tiquette de la premi\u00e8re paire. Ensuite, faites de m\u00eame pour les rubriques. Maintenant, gr\u00e2ce aux guides dynamiques, il sera tr\u00e8s facile de d\u00e9placer ces \u00e9tiquettes et ces rubriques pour qu\u2019elles s&#8217;embo\u00eetent les uns dans les autres, ou de savoir si elles sont d\u00e9cal\u00e9es lorsque vous d\u00e9placez accidentellement un objet.<\/p><h2 class=\"wp-block-heading\" id=\"conclusion\" style=\"font-style:normal;font-weight:400\">Conclusion<\/h2><p>Travaillez dur, mais aussi intelligemment. Gr\u00e2ce aux quatre conseils ci-dessus, vous pouvez minimiser les \u00e9tapes \u00e0 effectuer lors de la cr\u00e9ation ou de la maintenance des paires d&rsquo;\u00e9tiquettes et de rubriques dans les mod\u00e8les.<\/p><p>Vous avez une solution FileMaker personnalis\u00e9e dont vous assurez la maintenance et vous souhaitez b\u00e9n\u00e9ficier d&rsquo;autres astuces de ce type pour vous simplifier la vie ? N&rsquo;h\u00e9sitez pas \u00e0 nous contacter. Nous offrons des services de coaching et de d\u00e9veloppement qui r\u00e9pondront \u00e0 vos besoins d&rsquo;une mani\u00e8re ou d&rsquo;une autre.<\/p><p>J&rsquo;esp\u00e8re que cet article vous a plu. Je vous donne rendez-vous dans le prochain !<\/p>","protected":false},"excerpt":{"rendered":"<p>Le formatage de mod\u00e8le est une pente glissante Cr\u00e9er un mod\u00e8le parfait au pixel pr\u00e8s est difficile. Il est encore plus difficile de le conserver dans toutes les versions futures. J&rsquo;ai pass\u00e9 des tonnes de temps \u00e0 positionner soigneusement chaque objet pour que la mise en page soit parfaite. Puis, d\u00e8s que je mets \u00e0 &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.directimpactsolutions.com\/fr\/modeles-claris-filemaker-au-pixel-pres\/\"> <span class=\"screen-reader-text\">4 astuces pour des mod\u00e8les Claris FileMaker au pixel pr\u00e8s<\/span> Lire la suite >><\/a><\/p>\n","protected":false},"author":11,"featured_media":16693,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","footnotes":""},"categories":[34],"tags":[],"class_list":["post-16537","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-low-code"],"uagb_featured_image_src":{"full":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/iStock-1487389484-1.jpg",1799,1082,false],"thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/iStock-1487389484-1-150x150.jpg",150,150,true],"medium":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/iStock-1487389484-1-300x180.jpg",300,180,true],"medium_large":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/iStock-1487389484-1-768x462.jpg",768,462,true],"large":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/iStock-1487389484-1-1024x616.jpg",1024,616,true],"1536x1536":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/iStock-1487389484-1-1536x924.jpg",1536,924,true],"2048x2048":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/iStock-1487389484-1.jpg",1799,1082,false],"woocommerce_thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/iStock-1487389484-1-300x300.jpg",300,300,true],"woocommerce_single":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/iStock-1487389484-1-600x361.jpg",600,361,true],"woocommerce_gallery_thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/01\/iStock-1487389484-1-100x100.jpg",100,100,true]},"uagb_author_info":{"display_name":"Weihao Ding","author_link":"https:\/\/www.directimpactsolutions.com\/fr\/author\/weihao-dingdirectimpactsolutions-com\/"},"uagb_comment_info":0,"uagb_excerpt":"Le formatage de mod\u00e8le est une pente glissante Cr\u00e9er un mod\u00e8le parfait au pixel pr\u00e8s est difficile. Il est encore plus difficile de le conserver dans toutes les versions futures. J&rsquo;ai pass\u00e9 des tonnes de temps \u00e0 positionner soigneusement chaque objet pour que la mise en page soit parfaite. Puis, d\u00e8s que je mets \u00e0\u2026","_links":{"self":[{"href":"https:\/\/www.directimpactsolutions.com\/fr\/wp-json\/wp\/v2\/posts\/16537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.directimpactsolutions.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.directimpactsolutions.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/fr\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/fr\/wp-json\/wp\/v2\/comments?post=16537"}],"version-history":[{"count":4,"href":"https:\/\/www.directimpactsolutions.com\/fr\/wp-json\/wp\/v2\/posts\/16537\/revisions"}],"predecessor-version":[{"id":18079,"href":"https:\/\/www.directimpactsolutions.com\/fr\/wp-json\/wp\/v2\/posts\/16537\/revisions\/18079"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/fr\/wp-json\/wp\/v2\/media\/16693"}],"wp:attachment":[{"href":"https:\/\/www.directimpactsolutions.com\/fr\/wp-json\/wp\/v2\/media?parent=16537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/fr\/wp-json\/wp\/v2\/categories?post=16537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/fr\/wp-json\/wp\/v2\/tags?post=16537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}