Centrer un formulaire dans un conteneur.

  • Centrer un formulaire dans un conteneur.

    Posté par Sacha sur 23 avril 2025 at 12h06

    Bonjour tout le monde,

    J’ai un conteneur dans lequel se trouve un formulaire et un bouton valider. Ils sont disposés verticalement et centrer dans le conteneur. Par conséquent, le bouton valider est bien centrer sur l’écran mais le formuialire lui ne l’est pas. J’ai essayé beaucoup de choses sans succès? Voici les paramètres importants du conrteneur :

    <pre class=”language-plaintext”>LayoutAlignItems = LayoutAlignItems.Center
    LayoutJustifyContent = LayoutJustifyContent.Center

    Ensuite, voici les paramètres du formulaire :

    <pre class=”language-plaintext”>AlignInContainer = AlignInContainer.SetByContainer
    Height = 400
    Width = Parent.Width

    Pour illsutrer mon propos, voici une photo de mon canevas, une du site web et une sur téélphone pour que vous ayez un rendu :

    Aussi, si vous savez comment mettre le validé vraiment en bas sur le format téléphone, je suis preneur.

    Dans l’attente de vos réponses,

    Sacha PERY.

    Sacha a répondu 1 day, 6 hours ago 3 Membres · 4 Réponses
  • 4 Réponses
  • R3dKap

    Member
    24 avril 2025 at 14h00

    Salut @Sacha,

    Etant donné que ton formulaire doit fonctionner à la fois en mode PC et en mode mobile, voici comment je configurerai le conteneur vertical et le formulaire pour que ça fonctionne correctement :

    1. Container1.LayoutJustifyContent = LayoutJustifyContent.Start (les contrôles partent du haut et descendent vers le bas)
    2. Container1.LayoutAlignItems = LayoutAlignItems.Center (on centre les contrôles horizontalement)
    3. Container1.Width = Parent.Width
    4. Container1.Height = Parent.Height
    5. Container1.LayoutGap = 20 (pour mettre un peu d’espace entre le formulaire et le bouton du bas)
    6. Container1.PaddingBottom = 20 (pour que le bouton du bas ne soit pas collé au bord de l’écran)
    7. Form1.AlignInContainer = AlignInContainer.SetByContainer
    8. Form1.Width = Parent.Width - Parent.PaddingLeft - Parent.PaddingRight (la soustraction des paddings c’est au cas où tu décides un jour de mettre un padding gauche ou droite sur le conteneur parent du formulaire)
    9. Form1.FillPortions = 1 (pour être sûr que le formulaire repousse le bouton le plus possible vers le bas)

    Ensuite, tout va se jouer sur les Width des datacards du formulaire en fonction de ce que tu voudras obtenir au final (car par défaut ils ont une valeur fixe qui est recalculée lorsque tu changes le nombre de colonnes de ton formulaire –> attention d’ailleurs, car lors de cette manip’ toutes les formules dans les propriétés Width de tes datacards sont écrasées par la nouvelle valeur fixe ; donc faut bien choisir ton nombre de colonnes au départ et ne plus le modifier ensuite).

    Tout d’abord, il faut que tu saches qu’il existe 4 taille d’écrans dans Power Apps (source) :

    Du coup, ce que tu peux faire par exemple, c’est de répartir le nombre de champs que tu veux dans une ligne du formulaire sur les 4 dimensions d’écran en mettant la formule suivante dans le Width de chaque datacard :

    Parent.Width / (Int(3 * App.ActiveScreen.Size/ScreenSize.ExtraLarge))

    Si tu veux 6 champs par ligne, tu remplaces le 3 par un 6.

    Note : pour te faciliter la vie, si tu es ok pour que tous tes datacards aient la même largeur, tu peux mettre la formule sur le premier datacard puis “brancher” le Width de tous les autres datacards sur celui du premier… 😉

    PS : tu devrais utiliser les contrôles modernes car ils vont être de plus en plus présents dans les applications Power Apps désormais… 😉

  • DavidZed

    Member
    25 avril 2025 at 7h22

    Tu peux activer la hauteur automatique sur le formulaire, cela mettra le bouton toujours en bas de l’écran

  • Sacha

    Member
    25 avril 2025 at 9h50

    Merci beaucoup pour ta réponse, je me suis débrouillé comme j’ai pu et ça fonctionne donc parfait !!

  • Sacha

    Member
    25 avril 2025 at 9h50

    Merci beaucoup pour ta réponse, j’avais éssayé ça sans succès mais j’ai réussi entre temps.

Connectez-vous pour répondre.