Utilisation des outils de développement avec des formulaires

Vous pouvez tester l’apparence ou la mise en page de vos formulaires à l’aide des Outils de développement (Dev Tools). Chaque fois que vous exécutez un formulaire, si vous cliquez dessus avec le bouton droit, puis sélectionnez Inspecter, les outils de développement s’ouvrent. Ce tutoriel montre comment tester les styles CSS dans les outils de développement. Cet exemple montre comment modifier la couleur de tous les titres de champs de texte dans une grille de données.

Remarque : les modifications que vous appliquez dans les outils de développement sont temporaires. Si vous souhaitez les appliquer de manière permanente au formulaire, vous devez saisir votre code CSS personnalisé dans le champ de propriété CSS personnalisé du formulaire, puis l'appliquer à chaque composant que vous souhaitez styler, à l'aide de la propriété Classe CSS personnalisée d'un composant.

1. Exécutez un formulaire contenant une grille de données contenant des composants de champ de texte .
2. Cliquez avec le bouton droit à l'intérieur du formulaire, puis sélectionnez Inspecter.
3. Pour cibler l'élément exact auquel vous souhaitez appliquer les styles CSS, sélectionnez ou appuyez sur Ctrl + Shift + C. Vous pouvez maintenant sélectionner le titre du composant Champ de texte (Text Field ).
4. Dans la section Styles des outils de développement, vous pouvez voir différentes classes CSS. Pour cet exemple, recherchez la classe .table et remplacez la propriété color par violet.
   
   

   

   
   
5. Appliquons maintenant de manière permanente cette couleur à la grille de données. Dans le panneau Propriétés (Properties) du formulaire, saisissez la classe CSS suivante dans le champ CSS personnalisé :

   .color-change {
       color: violet
       }

6. Modifiez un champ de texte dans votre formulaire et accédez à l'onglet Affichage (Display).
7. Dans la Classe CSS personnalisée ( Custom CSS Class ), saisissez la classe CSS personnalisée que vous avez ajoutée à l'étape 5.
   
   

   

   
   
   Enregistrez le composant et consultez les résultats.