{"id":8923,"date":"2018-05-16T14:53:26","date_gmt":"2018-05-16T19:53:26","guid":{"rendered":"https:\/\/www.mrc-productivity.com\/docs\/?page_id=8923"},"modified":"2024-01-15T15:06:01","modified_gmt":"2024-01-15T21:06:01","slug":"form-layout","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/form-layout","title":{"rendered":"Controlling the Layout of Forms"},"content":{"rendered":"\n

Click here<\/a> to view the legacy documentation for this feature.<\/p>\n\n\n\n

m-Power templates do a lot to make beautiful web applications right “out of the box”. To compliment this, many developers take these aesthetics further by restructuring the page to maximize screen sizes real estate as well as page flow efficiency. However, restructuring the page layout typically requires going into the HTML source code. Often times this is a daunting task for the average m-Power developer. However, m-Painter allows you to control the layout exclusively within the graphical interface.<\/p>\n\n\n\n

The Form Designer is only supported in Bootstrap themed dictionaries.<\/p>\n\n\n\n

Enabling the Form Layout<\/h2>\n\n\n\n

Click the “Layout” checkbox to begin. Doing so will then automatically enable the “Form” layout.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

m-Painter understands that you almost certainly want to enter Drag and Drop mode so while in Form Layout, it will automatically enable this for you. However, you are welcome to disable it if you prefer.<\/p>\n\n\n\n

Green Hover Menu<\/h2>\n\n\n\n

From here, you can utilize the green hover menu to modify the layout of your page.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n
    \n
  • Up arrow — Inserts a row above your selected row<\/li>\n\n\n\n
  • Down arrow — Inserts a row below your selected row<\/li>\n\n\n\n
  • Left arrow — Insert a column to the left of your selected element<\/li>\n\n\n\n
  • Right arrow — Insert a column to the right of your selected element<\/li>\n\n\n\n
  • Plus icon — Increases the size of the selected element. Keep in mind your page is organized by 12 columns. This means that, by adjusting the size of the columns, you are instructing m-Power to take up some of those 12 available columns.<\/li>\n\n\n\n
  • Minus icon — Decreases the size of the selected element.<\/li>\n\n\n\n
  • Box icon — Wraps the selected element in a container.<\/li>\n\n\n\n
  • Trash icon — Removes the selected icon. <\/li>\n<\/ul>\n\n\n\n

    Form Label Orientation<\/h2>\n\n\n\n

    By default, the form is generated vertically with the field label above the input. <\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    There are two methods of changing the orientation to horizontal which will move the field label(s) to the left of the input(s).<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    Full Form Orientation<\/h3>\n\n\n\n

    Once Form Layout has been enabled, the right-side Element Panel will have an option to “Toggle Form Orientation (Horizonal). <\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    Clicking this button will move all <\/strong>field labels to the left of the inputs.<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    You may toggle the form between vertical and horizontal as needed.<\/p>\n\n\n\n

    Form Group Orientation<\/h3>\n\n\n\n

    Alternatively, you can choose to only have specific fields with a horizontal orientation (Field label to the left of the input). <\/p>\n\n\n\n

    You do not<\/strong> need to be in Form Layout mode for this change.<\/p>\n\n\n\n

    Select the field input in question. Use the blue navigation menu to ensure you have the form-group highlighted.<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    Once the form-group is highlighted, click the button to “Toggle Form Group Style (Horizontal)” from the right-side Element Panel.<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    Toggling the form-group style to horizontal will move the field label to the left of the input. <\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    Real World Example<\/h2>\n\n\n\n

    As you already know, when you build a maintainer form, m-Power creates each input on its own row. For this example, lets say you want to make better use of the space by placing 2 inputs in one row. We will, also wrap all content into a nice card to improve the aesthetics.<\/p>\n\n\n\n

    Open m-Painter and navigate to the Web Form Layout. Click “Layout.” Both the “Form” mode and “Drag & Drop” should now be activated.<\/p>\n\n\n\n

    Hover over your first 4 input boxes and click the right arrow. Your page should now look like this:<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    Next, click and drag some inputs from down below into the empty cells on the right.<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    Scroll down and hover over the empty rows. Click on the trash can for each of them to remove these now unneeded rows.<\/p>\n\n\n\n

    Finally, hover over the box that is just outside your main input section.<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    Once selected, click the box icon. Select Card, then select the card of your choosing. I’ll choose the success header. Click the “Edit UI” button to allow editing individual elements. Change the text of Success Header to read Customer Info. Save. Your page should now resemble this.<\/p>\n","protected":false},"excerpt":{"rendered":"

    m-Power templates do a lot to make beautiful web applications right “out of the box”. To compliment this, many developers take these aesthetics further by restructuring the page to maximize screen sizes real estate as well as page flow efficiency. However, restructuring the page layout typically requires going into the…<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[263],"ht-kb-tag":[],"class_list":["post-8923","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-bootstrap-templates"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/8923","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/comments?post=8923"}],"version-history":[{"count":37,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/8923\/revisions"}],"predecessor-version":[{"id":13995,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/8923\/revisions\/13995"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/media?parent=8923"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=8923"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=8923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}