{"id":480,"date":"2024-02-22T10:33:44","date_gmt":"2024-02-22T10:33:44","guid":{"rendered":"https:\/\/poiseddevelopers.com\/reality-tech\/?p=480"},"modified":"2024-04-11T12:56:21","modified_gmt":"2024-04-11T12:56:21","slug":"part-2-make-power-apps-ootb-form-control-responsive-using-containers","status":"publish","type":"post","link":"https:\/\/poiseddevelopers.com\/reality-tech\/part-2-make-power-apps-ootb-form-control-responsive-using-containers\/","title":{"rendered":"Part \u2013 2 Make Power Apps Ootb Form Control Responsive Using Containers"},"content":{"rendered":"

Follow these steps to set up the form responsiveness:<\/p>\n

    \n
  1. Open the power apps and click on the setting.<\/span><\/li>\n
  2. Go into the display settings and turn off the\u00a0\u201cScale to fit\u201d<\/b>\u00a0feature. Make sure that\u00a0\u201cLock Orientation\u201d<\/b>\u00a0and\u00a0\u201cLock Aspect ratio\u201d<\/b>\u00a0are disabled.<\/span><\/li>\n<\/ol>\n

    \"img-01\"<\/p>\n

     <\/p>\n

    Responsive Form with Form controls.<\/strong><\/p>\n

    Step 1<\/strong>: Click on the \u201cInsert\u201d icon and add the Text label property as shown in the below image. And Adjust label name according to the requirement and adjust the height and width of the label. Also changes the text as per the requirement.<\/p>\n

     <\/p>\n

    \"img-02\"<\/p>\n

    \"img-03\"<\/p>\n

    Step 2<\/strong>: Create a new blank screen and insert a horizontal container onto the screen. Set the container\u2019s height to match the previous specifications. In this method, the horizontal container is directly added as we\u2019re utilizing Power Apps\u2019 default form control.<\/p>\n

      \n
    • Width:<\/strong>Width<\/li>\n
    • Height:<\/strong>Height \u2013 Lbl_Screen_Header_1.Height<\/li>\n<\/ul>\n

       <\/p>\n

      \"img-04\"<\/p>\n

       <\/p>\n

      Step 3<\/strong>: Click on the \u201cInsert\u201d button and select the \u201cEdit form\u201d option, following the image reference provided. Ensure that you choose the Horizontal container and subsequently place the form inside this container.<\/p>\n

       <\/p>\n

      \"img-05<\/p>\n

       <\/p>\n

      Step 4<\/strong>: After adding the form and linking it with the data source, modify the form\u2019s properties by setting the number of columns to 2 and choosing a horizontal layout. If you wish to omit certain fields or rearrange their order, access the \u201cEdit fields\u201d option located in the image below.<\/p>\n

       <\/p>\n

      \"img-06\"<\/p>\n

       <\/p>\n

      Step 5<\/strong>: Enabling the\u00a0\u201cWrap\u201d<\/strong>\u00a0control for the form will result in the appearance depicted in the image below. This occurs due to the form\u2019s\u00a0minimum height being set to 250<\/strong>. To utilize the entire form space, a formula can be applied.<\/p>\n

       <\/p>\n

      \"img-07<\/p>\n

       <\/p>\n

      Step 6<\/strong>: Let\u2019s incorporate the logic for the form\u2019s minimum height by including the specified height within the formula provided below.<\/p>\n

        \n
      • LayoutMinHeight<\/strong>: Parent.Height<\/li>\n<\/ul>\n

         <\/p>\n

        \"img-08\"<\/p>\n

         <\/p>\n

        Step 7<\/strong>: Upon minimizing the browser window, observe how all controls automatically adapt and adjust according to the screen size, ensuring optimal responsiveness.<\/p>\n

         <\/p>\n

        \"img-09\"<\/p>\n

         <\/p>\n

         <\/p>\n","protected":false},"excerpt":{"rendered":"

        Follow these steps to set up the form responsiveness: Open the power apps and click on the setting. Go into the display settings and turn off the\u00a0\u201cScale to fit\u201d\u00a0feature. Make sure that\u00a0\u201cLock Orientation\u201d\u00a0and\u00a0\u201cLock Aspect ratio\u201d\u00a0are disabled.   Responsive Form with Form controls. Step 1: Click on the \u201cInsert\u201d icon and add the Text label property […]<\/p>\n","protected":false},"author":2,"featured_media":483,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-480","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-power-apps"],"acf":[],"_links":{"self":[{"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/posts\/480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/comments?post=480"}],"version-history":[{"count":5,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/posts\/480\/revisions"}],"predecessor-version":[{"id":2814,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/posts\/480\/revisions\/2814"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/media\/483"}],"wp:attachment":[{"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/media?parent=480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/categories?post=480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/poiseddevelopers.com\/reality-tech\/wp-json\/wp\/v2\/tags?post=480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}