{"id":13689,"date":"2023-12-04T14:20:54","date_gmt":"2023-12-04T20:20:54","guid":{"rendered":"https:\/\/www.mrc-productivity.com\/docs\/?post_type=ht_kb&#038;p=13689"},"modified":"2023-12-06T13:48:47","modified_gmt":"2023-12-06T19:48:47","slug":"working-with-form-layout-grid-layout","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/working-with-form-layout-grid-layout","title":{"rendered":"Working with Form Layout &#038; Grid Layout"},"content":{"rendered":"\n<p>m-Painter was designed to work in such a way that successful users could do practically anything without needing to be a programmer. This includes the task of moving elements around the page to improve or otherwise adjust the layout of the elements on the page. Perhaps a developer wants to arrange a form so inputs are in a multi column approach or maybe a developer wants to add content from different apps side-by-side in layout cards. All this can be accomplished within the graphical interface of m-Painter, all thanks to the Layout functionality.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Video Overview<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Working with Form &amp; Grid Layout\" width=\"643\" height=\"362\" src=\"https:\/\/www.youtube.com\/embed\/h88zB-AQiao?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Layout Wizard &#8211; Form<\/h3>\n\n\n\n<p>When working on any page with a form (think a dialog panel or an update screen of a maintainer), you may want to adjust the layout of the inputs within the form. Typically, m-Power generates form inputs that go all the way across the page, printing 1 row at a time. As a developer, if you wanted to change that, you could use the Layout &#8211; Form option to adjust.<\/p>\n\n\n\n<p>Once in m-Painter, click the Layout button to activate the Layout Wizard<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/newlayout1.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Clicking this button will do two things for you automatically, it will enter you into the Form Layout mode and it will also enable drag and drop, allowing you to easily move elements around in your form.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/newlayout2.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>You will notice that your form has now been transformed. Notably, your page now has  numerous dotted borders as well as a green menu viewable within whatever element you are currently hovering on.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/newlayout3.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>The green menu allows you to either add new rows above\/below the element you are hovered over (up\/down arrow), add new columns to the left\/right of the selected element (left\/right arrow), increase\/decrease the size of the current selected element (plus\/minus), wrap the current content into a card\/tab (square icon), or remove the element (trash).<\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">The plus\/minus icon works by adjusting the width of the selected element as it fits within the structure of a 12 column bootstrap report. For instance, the inputs you see above are set to a full 12 column with. Pressing the minus icon six times will reduce their width to 6 columns, taking up half of the page.<\/p>\n\n\n\n<p>To add a second column of inputs, hover over each label or input and click the right arrow.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/newlayout4.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Notice that there is now an empty box to the right of customer number? We can now click and drag another input into that empty box.  Dragging the name to the empty area will look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/newlayout5.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>There is now an empty row, it can be removed by hovering over it and pressing the trash icon. Repeat this process until the layout of the page matches your design goals. <\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-alert\">If you wish to make non-layout changes again, simply uncheck the &#8220;Layout&#8221; button.<\/p>\n\n\n\n<p>Be sure to save changes in m-Painter.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/newlayout6.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Layout Wizard &#8211; Grid<\/h3>\n\n\n\n<p>While the Grid Layout works in the same fashion as the Form Layout, their use case is entirely different. The Grid Layout is designed to work <strong>outside<\/strong> of a form. While the use case above assumed we were moving elements <em>within<\/em> a form, this example will have us move elements <em>outside<\/em> of the form. A good example of this is when you are working with a page with no form at all (like a report) or you are trying to adjust non-form elements (like importing a second application next to your main application.<\/p>\n\n\n\n<p>To implement, click the &#8220;Layout&#8221; button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/newlayout7.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">If the slider appears, click the &#8220;Grid&#8221; button. If no slider appears after clicking Layout, it means that there is no form on this page and m-Painter as automatically put into the Grid Layout.<\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">Please note that while the Form Layout mode assumes you will do Drag and Drop, the Grid Layout does not make this assumption. As such toggling into the Grid Layout will deselect the Drag and Drop option. <\/p>\n\n\n\n<p>To split this entire card and make room for another panel on the right, hover over the main card and press the right arrow. This will shrink the currently selected element to make room for another element to the right.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/newlayout8.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>When completed, m-Painter will look like this. Notice the empty space on the right?<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/newlayout9.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>From here a developer now has space to add new elements to the page, such as a graph or an imported application. <\/p>\n\n\n\n<p>Ultimately, the Grid Layout mode should be thought of as a tool that allows developers to adjust how any element on the page can be adjusted, not just specific form elements.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>m-Painter was designed to work in such a way that successful users could do practically anything without needing to be a programmer. This includes the task of moving elements around the page to improve or otherwise adjust the layout of the elements on the page. Perhaps a developer wants to&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[255],"ht-kb-tag":[],"class_list":["post-13689","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-mpainter"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/13689","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=13689"}],"version-history":[{"count":2,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/13689\/revisions"}],"predecessor-version":[{"id":13729,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/13689\/revisions\/13729"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/media?parent=13689"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=13689"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=13689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}